Configuring an OAuth provider

기본 프로바이더 설정 덮어쓰기

내장된 프로바이더의 경우, 일반적으로 클라이언트 ID와 클라이언트 시크릿만 지정하면 됩니다. OIDC(OpenID Connect)의 경우에는 발급자(issuer)도 필요합니다. 이 값들은 환경 변수에서 추론할 수 있습니다.

기본 프로바이더 설정 옵션 중 일부를 덮어쓰려면, 프로바이더 함수 호출 시 해당 옵션을 추가하면 됩니다. 이 옵션들은 기본값과 깊게 병합됩니다. 즉, 변경이 필요한 부분만 덮어쓰면 됩니다. 예를 들어, 다른 스코프를 사용하려면 전체 authorization 옵션 대신 authorization.params.scope만 덮어쓰면 됩니다.

예를 들어, 프로바이더의 기본 scope를 덮어쓰려면 다음과 같이 할 수 있습니다:

./auth.ts

import NextAuth from "next-auth";
import Auth0 from "next-auth/providers/auth0";
 
export const { handlers, auth } = NextAuth({
  providers: [
    Auth0({ authorization: { params: { scope: "openid custom_scope" } } }),
  ],
});

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import Auth0 from "@auth/qwik/providers/auth0";
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [
      Auth0({ authorization: { params: { scope: "openid custom_scope" } } }),
    ],
  })
)

src/auth.ts

import { SvelteKitAuth } from "@auth/sveltekit";
import Auth0 from "@auth/sveltekit/providers/auth0";
 
export const { handle, signIn } = SvelteKitAuth({
  providers: [
    Auth0({ authorization: { params: { scope: "openid custom_scope" } } }),
  ],
});

src/hooks.server.ts

export { handle } from "./auth"

또 다른 예로, profile 콜백은 기본적으로 name, email, picture를 반환하지만, 프로바이더에서 더 많은 정보를 반환하고 싶을 수 있습니다. 반환된 값은 데이터베이스에 사용자 객체를 생성하는 데 사용됩니다.

./auth.ts

import NextAuth from "next-auth";
import Auth0 from "next-auth/providers/auth0";
 
export const { handlers, auth } = NextAuth({
  providers: [
    Auth0({
      // 필요한 경우 외부 리소스에 호출할 수도 있습니다.
      async profile(profile) {
        return {};
      },
    }),
  ],
});

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
import Auth0 from "@auth/qwik/providers/auth0";
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [
      Auth0({
        // 필요한 경우 외부 리소스에 호출할 수도 있습니다.
        async profile(profile) {
          return {};
        },
      }),
    ],
  })
)

src/auth.ts

import { SvelteKitAuth } from "@auth/sveltekit";
import Auth0 from "@auth/sveltekit/providers/auth0";
 
export const { handle } = SvelteKitAuth({
  providers: [
    Auth0({
      // 필요한 경우 외부 리소스에 호출할 수도 있습니다.
      async profile(profile) {
        return {};
      },
    }),
  ],
});

src/hooks.server.ts

export { handle } from "./auth"

직접 프로바이더 사용하기

💡

처음부터 프로바이더를 만들기 전에, 먼저 내장된 OAuth 프로바이더를 확인해 보세요.

우리는 OAuth 또는 OIDC 규격을 준수하는 모든 프로바이더를 지원합니다. providers 목록에 객체를 전달하여 시작할 수 있습니다:

./auth.ts

import NextAuth from "next-auth";
 
export const { handlers, auth } = NextAuth({
  providers: [{
    id: "my-provider", // signIn("my-provider")를 사용하며 콜백 URL의 일부가 됩니다.
    name: "My Provider", // 선택 사항, 기본 로그인 페이지에서 버튼 텍스트로 사용됩니다.
    type: "oidc", // 또는 OAuth 2 프로바이더의 경우 "oauth"
    issuer: "https://my.oidc-provider.com", // .well-known/openid-configuration URL을 추론하기 위해 사용됩니다.
    clientId: process.env.AUTH_CLIENT_ID, // 프로바이더 대시보드에서 가져옵니다.
    clientSecret: process.env.AUTH_CLIENT_SECRET, // 프로바이더 대시보드에서 가져옵니다.
  }],
});

/src/routes/plugin@auth.ts

import { QwikAuth$ } from "@auth/qwik"
 
export const { onRequest, useSession, useSignIn, useSignOut } = QwikAuth$(
  () => ({
    providers: [{
      id: "my-provider", // signIn("my-provider")를 사용하며 콜백 URL의 일부가 됩니다.
      name: "My Provider", // 선택 사항, 기본 로그인 페이지에서 버튼 텍스트로 사용됩니다.
      type: "oidc", // 또는 OAuth 2 프로바이더의 경우 "oauth"
      issuer: "https://my.oidc-provider.com", // .well-known/openid-configuration URL을 추론하기 위해 사용됩니다.
      clientId: import.meta.env.AUTH_CLIENT_ID, // 프로바이더 대시보드에서 가져옵니다.
      clientSecret: import.meta.env.AUTH_CLIENT_SECRET, // 프로바이더 대시보드에서 가져옵니다.
    }],
  })
)

src/auth.ts

import { SvelteKitAuth } from "@auth/sveltekit";
 
export const { handle } = SvelteKitAuth({
  providers: [{
    id: "my-provider", // signIn("my-provider")를 사용하며 콜백 URL의 일부가 됩니다.
    name: "My Provider", // 선택 사항, 기본 로그인 페이지에서 버튼 텍스트로 사용됩니다.
    type: "oidc", // 또는 OAuth 2 프로바이더의 경우 "oauth"
    issuer: "https://my.oidc-provider.com", // .well-known/openid-configuration URL을 추론하기 위해 사용됩니다.
    clientId: process.env.AUTH_CLIENT_ID, // 프로바이더 대시보드에서 가져옵니다.
    clientSecret: process.env.AUTH_CLIENT_SECRET, // 프로바이더 대시보드에서 가져옵니다.
  }],
});

src/hooks.server.ts

export { handle } from "./auth"

그런 다음, 프로바이더 대시보드에서 콜백 URL을 https://app.com/{basePath}/callback/{id}로 설정하세요.

기본적으로 basePath는 Next.js의 경우 /api/auth이고, 다른 모든 통합에서는 /auth입니다. basePath를 참조하세요.

이제 끝입니다! 🎉

새로운 내장 프로바이더 추가하기

여러분이 만든 커스텀 프로바이더가 다른 사람들에게도 유용할 것 같다면, PR을 열어 내장 목록에 추가하는 것을 권장합니다.

프로바이더 파일 생성하기

packages/core/src/providers 디렉토리 아래에 새로운 {provider}.ts 파일을 생성하세요.

코드 컨벤션 준수하기

내장 프로바이더를 참고하여 여러분의 프로바이더가 동일한 코드 컨벤션을 따르도록 하세요. 예를 들어:

TypeScript를 사용하세요.
기본 내보내기(named default export)를 사용하세요: export default function YourProvider
프로바이더에서 사용 가능한 사용자 정보 속성을 정의하는 TypeScript interface를 내보내세요.
필요한 JSDoc 주석/문서를 추가하세요. 예를 들어, Auth0 프로바이더는 OIDC를 위한 좋은 예제이며, GitHub 프로바이더는 OAuth 프로바이더의 예제입니다.
다른 사람들이 이 프로바이더를 설정하는 방법을 이해할 수 있도록 프로바이더의 API 참조/문서 링크를 추가하세요.

GitHub 이슈 드롭다운에 프로바이더 추가하기

새로운 프로바이더 이름을 프로바이더 이슈 템플릿의 Provider type 드롭다운 옵션에 추가하세요.

로고 추가하기

로고 파일 {provider}.svg를 docs/static/img/providers 디렉토리에 추가하세요.

PR이 머지되면, 다른 사람들도 이 프로바이더를 우리의 어떤 통합 기능과 함께 사용하고 발견할 수 있게 됩니다. 이게 전부입니다! 🎉

Configuring Resend for magic links Configuring Custom HTTP Email Provider

Configuring an OAuth provider

기본 프로바이더 설정 덮어쓰기

직접 프로바이더 사용하기

새로운 내장 프로바이더 추가하기

프로바이더 파일 생성하기

코드 컨벤션 준수하기

GitHub 이슈 드롭다운에 프로바이더 추가하기

로고 추가하기

About Auth.js

Download

Acknowledgements