Discussion on: Using NextAuth.js with Magic links

[Nick Arciero]

Yes, you can add custom logic to the Provider's authorize function or implement one of next-auth's callbacks depending on what you're trying to achieve.

Might also be worth reading this guide from Magic's docs.

[Mike Wright]

Hey Nick. I signed up for Magic.link with the link provided but only got 1k MAUs instead of 3k ;(

You need to use this import 'next-auth/react' instead of 'next-auth/client' on the signin.tsx page.

Also, there appears to be all sorts of typescript issues. Resolved below:

const magic = new Magic(process.env.MAGIC_SK)
const session: any = { jwt: true }

export default NextAuth({
  session: session,
  providers: [
    Credentials({
      name: 'Magic Link',
      credentials: {
        didToken: { label: 'DID Token', type: 'text' },
      },
      async authorize({ didToken: didToken }, req: any) {
        // validate magic DID token
        magic.token.validate(didToken)

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

        // return user info
        return { ...metadata } as any
      },
    }),
  ],
  pages: {
    // override signIn page so we can integrate with Magic
    signIn: '/auth/signin',
  },
})