Nuxflare Auth: Nuxt, Cloudflare 및 OpenAuth.js로 구축된 경량 자체 호스팅 인증 서버

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

눅스플레어 / 인증

Cloudflare, Nuxt 및 OpenAuth.js로 구축된 현대적이고 가벼운 자체 호스팅 인증 서버입니다.

Nuxflare 인증

Cloudflare, Nuxt 및 OpenAuth.js로 구축된 현대적이고 가벼운 자체 호스팅 인증 서버입니다.

이게 뭐야?

Nuxflare Auth를 사용하면 번거로움 없이 앱에 인증을 추가할 수 있습니다. 필요한 모든 것을 번들로 제공하는 모노레포입니다.

• Nuxt 3 및 @nuxt/ui로 구축된 매끄러운 인증 UI
• Cloudflare Workers에서 실행되는 백엔드 인증 마법
• 모든 것이 어떻게 조화되는지 확인할 수 있는 바로 사용 가능한 예

특징

• ? 다음을 포함하는 완전한 인증 UI:
  • 코드 기반 로그인
  • 비밀번호 기반 로그인
  • 비밀번호 찾기 절차
  • 사용자 등록
• ? GitHub 및 Google을 통한 OAuth2 인증(더 많은 공급자를 쉽게 추가)
• ✉️ 재전송을 사용한 이메일(또는 다른 제공업체 이용)
• ⚡ Cloudflare의 에지 네트워크로 구동되는 번개처럼 빠른 속도

프로젝트 레이아웃

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

전제조건

시작하기 전에 다음이 필요합니다.

• pnpm
• Cloudflare 계정
• Google의 OAuth 자격 증명…

GitHub에서 보기

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!