Nuxflare Auth는 앱에 인증을 쉽게 추가할 수 있도록 설계된 현대적이고 가벼운 자체 호스팅 인증 서버입니다. Nuxt 3, Cloudflare Workers 및 OpenAuth.js로 구축되어 필요한 모든 것을 한곳에 번들로 제공합니다.

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

Nuxflare 인증이 필요한 이유

Nuxt에는 이미 nuxt-auth-utils 및 sidebase-auth와 같은 좋은 인증 모듈이 있습니다.
그렇다면 Nuxflare Auth는 무엇이 다른가요?

• 분리된 인증: Nuxflare Auth를 사용하면 인증 서버와 인증 UI(Nuxt UI로 구축)를 기본 앱과 별도로 배포할 수 있습니다. 즉, 인증 서버를 쉽게 재사용하여 여러 클라이언트 측 앱(Nuxt로 구축 여부와 관계없음), 외부 API, 모바일 앱 등과 작업할 수 있습니다.
• Monorepo 아키텍처 권장: Nuxt 앱과 인증 모듈을 분할함으로써 Nuxflare Auth는 번들 크기를 최소로 유지합니다. 이는 엄격한 크기 제한이 있는 Cloudflare Workers 배포에 적합합니다(무료 요금제의 경우 3MB, 무료 요금제의 경우 10MB). 유료 플랜입니다.

프로젝트 구조

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

Nuxflare 인증 배포

전제조건

• pnpm
• Cloudflare 계정
• Google 및 GitHub의 OAuth 자격 증명
• 이메일 전송을 위한 Resend API 키

시작하기

1. 저장소를 복제하고 종속성을 설치합니다.

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

1. API 토큰 생성 및 구성:

아. 이 링크를 사용하여 필요한 권한이 있는 Cloudflare API 토큰을 생성하세요.
비. CLOUDFLARE_API_TOKEN 환경 변수를 설정합니다:

   git clone https://github.com/nuxflare/auth nuxflare-auth
   cd nuxflare-auth
   pnpm install

1. 비밀 구성:

   export CLOUDFLARE_API_TOKEN=GahXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1. sst.config.ts에서 fromEmail을 구성하세요.

   # OAuth stuff
   pnpm sst secret set GoogleClientID your_client_id
   pnpm sst secret set GoogleClientSecret your_client_secret
   pnpm sst secret set GithubClientID your_client_id
   pnpm sst secret set GithubClientSecret your_client_secret

   # For emails
   pnpm sst secret set ResendApiKey your_resend_api_key

1. 지역 개발 시작:

   async run() {
     const fromEmail = "hi@nuxflare.com";
     // ...
   }

1. 프로덕션에 배포:

   pnpm dev

클라이언트 앱 예시

저장소에는 packages/example-client에 간단한 예제 클라이언트 앱이 포함되어 있습니다.

컴포저블용 API는 nuxt-auth-utils와 매우 유사합니다.

   pnpm sst deploy --stage production

클라이언트가 배포된 인증 인스턴스의 엔드포인트를 가리키도록 해야 합니다.

```typescript [패키지/example-client/app/utils/auth.ts]
const 클라이언트 = createClient({
clientID: "nuxt",
발급자: "https://authdemo.nuxflare.com", // <-- 이것을 엔드포인트로 바꾸세요
});

export const useSession = () => {
  const sessionState = useSessionState();
  const accessToken = useAccessTokenCookie();
  const refreshToken = useRefreshTokenCookie();
  const clear = () => {
    sessionState.value = {};
    accessToken.value = null;
    refreshToken.value = null;
  };
  return {
    loggedIn: computed(() => !!sessionState.value.user),
    user: computed(() => sessionState.value.user || null),
    session: sessionState,
    clear,
  };
};



          

            
        
위 내용은 Nuxflare Auth: Nuxt, Cloudflare 및 OpenAuth.js로 구축된 경량 자체 호스팅 인증 서버의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!