Magic 링크와 함께 NextAuth.js 사용

이 게시물은 Next.js 앱에서 암호 없는 인증을 활성화하기 위해 Magic과 함께 NextAuth.js 링크 인증을 사용하는 방법에 관한 것입니다.

While NextAuth.js supports passwordless auth via the Email provider, Magic provides blockchain based security and minimal setup that makes it easy to get up and running (NextAuth.js requires configuring your database for magic email links).

설정

필요한 NextAuth 및 Magic 패키지를 설치합니다.

yarn add next-auth magic-sdk @magic-sdk/admin

1 단계

시작하려면 Magic 로그인을 확인하고 Credentials 개체를 반환하는 사용자 지정 NextAuthUser 공급자를 생성해야 합니다.

// src/pages/api/auth/[...nextauth].ts

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import { Magic } from '@magic-sdk/admin';

const magic = new Magic(process.env.MAGIC_SK);

export default NextAuth({
  session: {
    jwt: true,
  },
  pages: {
    // override signIn page so we can integrate with Magic
    signIn: '/auth/signin',
  },
  providers: [
    Providers.Credentials({
      name: 'Magic Link',
      credentials: {
        didToken: { label: 'DID Token', type: 'text' },
      },
      async authorize({ didToken }, req) {
        // validate magic DID token
        magic.token.validate(didToken);

        // fetch user metadata
        const metadata = await magic.users.getMetadataByToken(didToken);

        // return user info
        return { ...metadata };
      },
    }),
  ],
});

2 단계

다음으로 사용자 정의signIn 페이지를 생성해야 합니다. 이 페이지에는 사용자의 이메일을 캡처하는 <form>가 포함되며 onSubmit 기능은 Magic SDK를 사용하여 로그인합니다.

Notice in Step 1 how we specified a custom signIn page (/auth/signin). This allows us to build a custom login flow with Magic and then signIn via NextAuth. You can extend this custom signIn page to support social login providers (using Magic or NextAuth).

// src/pages/auth/signin.tsx

import { useRouter } from 'next/router';
import { signIn } from 'next-auth/client';
import { Magic } from 'magic-sdk';
import { useForm } from 'react-hook-form'; // use your form lib of choice here

// magic-sdk is only availabile in the browser
const magic = typeof window !== 'undefined' && new Magic(process.env.NEXT_PUBLIC_MAGIC_PK || 'a');

export default function SignIn() {
  const router = useRouter();
  const { register, handleSubmit } = useForm();

  const onSubmit = async ({ email }) => {
    if (!magic) throw new Error(`magic not defined`);

    // login with Magic
    const didToken = await magic.auth.loginWithMagicLink({ email });

    // sign in with NextAuth
    await signIn('credentials', {
      didToken,
      callbackUrl: router.query['callbackUrl'] as string,
    });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: true })} placeholder="[email protected]" />

      <button type="submit">Sign in</button>
    </form>
  );
}

3단계

Magic 대시보드에 있는 공개/비밀 키로 .env 파일을 채워야 합니다.

// .env

NEXT_PUBLIC_MAGIC_PK=pk_live_XXXXXXX
MAGIC_SK=sk_live_XXXXXXX

마무리

이제 Magic를 통해 로그인하고 NextAuth.js가 나머지를 처리하도록 할 수 있습니다!

Magicusing this link에 가입하고 3,000회 무료 로그인을 추가로 받으세요!