In this post we will be exploring Authentication in the Next.js app directory with Next-Auth using OAuth.
What is OAuth?
-
OAuth, or Open Authorization, is an open standard for token-based authentication and authorization on the Internet. It allows an individual's account information to be used by third-party services, such as Google, Microsoft, Apple, GitHub, etc... without exposing the person's password.
-
OAuth acts as an intermediary on behalf of the end user, providing the service with an access token that authorizes specific account information to be shared. When a user sets up an account with a service that uses OAuth, they are presented with a consent form that lists the data the service will be able to access and the actions it will be able to perform.
Getting Started
Head on over to Next-auth.js.org for official documentation.
Installing Next-Auth
npm install next-auth
After installing Next-Auth in your Next.js project, we will need to create an "api" directory inside of the app directory. After creating the api directory, inside of that folder we will create another directory called "auth". Inside of the auth dirtory we will also create a catch all directory called "[...nextauth]".
- Inside of the [...nextauth] directory, create a file named "route.ts" this whole process will establish an API route for our Next-Auth Authentication.