Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 9, 2021 11:03 pm GMT

Using NextAuth.js with Magic links

NextAuth.js + Magic

This post is about how to use Magic link authentication with NextAuth.js to enable passwordless authentication in a Next.js app.

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).

Setup

Install the necessary NextAuth and Magic packages

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

Step 1

To start, we need to create a custom NextAuth Credentials provider that will validate the Magic login and return the User object.

// src/pages/api/auth/[...nextauth].tsimport 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 };      },    }),  ],});

Step 2

Next, we need to create a custom signIn page. This page will contain a <form> that captures the user's email and in the onSubmit function will login using the 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.tsximport { 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 browserconst 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>  );}

Step 3

Make sure to populate your .env file with your public/secret keys found on the Magic dashboard.

// .envNEXT_PUBLIC_MAGIC_PK=pk_live_XXXXXXXMAGIC_SK=sk_live_XXXXXXX

Magic Dashboard Keys

Finishing up

You should now be able to login via Magic and have NextAuth.js handle the rest!

Sign up for Magic using this link to get an additional 3,000 free logins!


Original Link: https://dev.to/narciero/using-nextauth-js-with-magic-links-df4

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To