How to Implement Auth in Next.js with Magic
Next.js is a popular React Framework with many built-in features, such as:
- An intuitive page-based routing system (with support for dynamic routes)
- Pre-rendering, both static generation (SSG) and server-rendering (SSR) are supported on a per-page basis
- Automatic code splitting for faster page loads
- Client-side routing with optimized prefetching
- Built-in CSS and Sass support, and support for any CSS-in-JS library
- Development environment which supports Hot Module Replacement
- API routes to build API endpoints with Serverless Functions
- Fully extendable
A Next.js application can also be seamlessly deployed with Vercel - an all-in-one platform for static & Jamstack deployment, serverless functions, and global CDN.
In this tutorial, we'll show how to integrate Magic authentication with an example Next.js application, where users can sign up/log in, get profile info, and log out.
Deploying and iterating on a Next.js application is super easy. You just click on this link to get started: Deploy Next.js Magic Example
After you click on the Deploy Next.js Magic Example link, you'll be presented with the form shown above if you already have an account with Vercel, if not you'll be able to sign up for a new account. Note there are two Environment Values are required to continue
To grab these two values, you need to sign up or log in to the Magic Dashboard to view your API keys. Once you are logged in you, you can then update the
'NEXT_EXAMPLE_MAGIC_SECRET_KEY' string to your actual secret API key, which looks something like
Once that's done, you can update the
'NEXT_EXAMPLE_MAGIC_PUBLISHABLE_KEY' string to your publishable API key, which looks something like
Once the keys are copy and pasted in the Environment Values field, you can hit Continue.
Nothing needs to be changed here, hit Continue again.
You now have the option to connect your GitHub account and create a repository based on Next.js's official
Now you are presented with the screen below, nothing needs to be changed, simply hit Deploy to start the production deployment of the Next.js Magic example application!
Application is building and deploying
Application deployment is complete and live!
Now you can visit next-js.sean-demo.now.sh (or your application's URL) to check out your freshly deployed application!
You can also check out the Next.js Magic open source example to learn more about the implementation and start building your application from this boilerplate if you've setup a GitHub repository from Step 2!