How to Add Github OAuth with NextAuth.js for Single Sign On in Next.Js 14

What is Github Oauth App

Any application that uses the OAuth 2.0 protocol for authentication and authorization to interface with GitHub is known as a GitHub OAuth App. By securely logging in with their GitHub credentials, users can allow the app to access GitHub resources on their behalf. With GitHub OAuth localhost, developers can create secure experiences for users interacting with their applications.

How Github Oauth works

Let's get an overview of how github oauth api works:

Register - The developer needs to register the application on Github to get github oauth client id and client secret. It means you have to provide some information for github oauth integration, for example, application name, application url, github oauth app callback url, etc. 

Request User Authentication - When a user wants to sign in to the application, they will be redirected to GitHub’s authorization URL with the github oauth token and a request for github oauth scopes.

Token Exchange - To exchange the authorization code for github oauth bearer token, the application's backend server sends a POST request to GitHub's token endpoint.

Receive Token - If the request is successful, GitHub responds with an access token.

Access Granted by Github - With the github oauth token for organization, the application can make authenticated requests to GitHub’s API to access resources.

Set up Github Oauth App

We must first setup GitHub, as we will be using it as a provider. You have to register a GitHub OAuth app with your account or any organization. Follow these steps to create an OAuth app:

Navigate to your Github Page or your Organization Github Page where you want to add your application.

Now click your profile picture and select Settings. 

                                                              

choose <> Developer settings, then click on OAuth Apps. 

                                 

 

                                     

Next, click on the Register a new application button.

                                        

enter the full URL of your application.

                                   

For the github oauth callback url, input localhost:3000/auth/github/callback. 

Finally, click the Register application button to finish the setup.

                                       

Set up GitHub oauth nextJs with NextAuth.js

Setting up github oauth nextJs with nextAuth is very easy and straightforward.

Gather all Credentials for github oauth nextjs

    GITHUB_CLIENT_ID=your-github-client-id

    GITHUB_CLIENT_SECRET=your-github-client-secret

Install next-auth

   

    Install next-auth

Update App.js

   

    import NextAuth from 'next-auth';

    import Providers from 'next-auth/providers';

    export default NextAuth({

    providers: [

        Providers.GitHub({

        clientId: process.env.GITHUB_CLIENT_ID,

        clientSecret: process.env.GITHUB_CLIENT_SECRET,

        }),

    ],

    });

Run your App

    npm run dev

Frequently Asked Questions(FAQs)

How does github oauth work?

OAuth with github works like below:

• App Registration
• Request Authorization
• User Authorizes
• Code Exchange
• Github provides Access

How to get github oauth token?

To get a GitHub oauth token for organization, exchange the authorization code received after user authorization by making a POST request to GitHub's token endpoint with the Client ID, and Client Secret.

How to implement github oauth?

To integrate oauth for github, register your app on GitHub to obtain a Client ID and Secret, request user authorization, and exchange the authorization code for an access token to access GitHub's API.

How to create github oauth app?

Follow the steps as I mentioned to create github oauth login.

Is github oauth safe?

yes, github oauth is safe, as it uses github oauth 2.0 protocol to manage the authentication.