Next.js + Magic Auth boilerplate

Built with

• Next.js
• Typescript
• Magic Auth
• Tailwind CSS

Demo

Check out a live demo 👉 https://email-auth.vercel.app

Magic Auth

Magic is a passwordless authentication sdk that lets you plug and play different auth methods into your app. Magic supports passwordless email login via magic links, social login with OAuth2 and web standards like WebAuthn.

For more insight into the authentication flow and actual implementation, take a look at their Next.js starter example-nextjs or visit the docs.

Setup

• Sign up for Magic
• Create a new App

Email login

• Copy TEST PUBLISHABLE KEY for testing purposes and LIVE PUBLISHABLE KEY for live production

Social login (OAuth2)

Follow the official documentation on how to set up each social login provider:

• Github
• Google
• Gitlab
• Bitbucket
• Apple
• Twitter
• Facebook
• LinkedIn

Develop locally

git clone https://github.com/paulphys/next-magic-auth.git
cd next-magic-auth
yarn
yarn dev

Create a .env file similar to .env.example in the root of the application.

Deploy to Vercel ▲

• Add NEXT_PUBLIC_MAGIC_KEY as an Environment Variable to the production build.