Authentication for apps -> How can utilize next-auth for authentication?

Authentication for apps -> How can utilize next-auth for authentication?

Log in using GitHub:

Authentication and Authorization is an integral processes to keep the application secure. Without proper authentication measures in place, unauthorized users could gain access to sensitive information or perform actions that could harm the application or its users.

Authentication can be done using the User's Google account or GitHub Apple etc.

How can we implement such an authentication process?

There are several ways to implement but today we can check how we can utilize the next-auth library for GitHub authentication and it can be extended to any other authentication (google, apple, Reddit etc).

Steps for GitHub authentication :

  1. First, get Github Client ID and secret Id by creating a new OAuth app from (Setting ->Developer setting -> New OAuth app-> provide URL and callback URLs) then generate the client Id.

  2. Keep the Client ID and secret ID in the env file (.env file)

# Authentication (NextAuth.js)






  1.    // Keep  this Option in any folder(lib->auth.js)
       import GithubProvider from "next-auth/providers/github"
       export const authOptions = {
         // Configure one or more authentication providers
         providers: [
             clientId: process.env.NEXT_GITHUB_CLIENT_ID,
             clientSecret: process.env.NEXT_GITHUB_CLIENT_SECRET,
           // ...add more providers here

4.create a folder under (src->pages->auth->[...nextauth].js file and add these lines of codes.

import NextAuth from "next-auth"

import { authOptions } from "@/lib/auth"

// @see ./lib/auth
export default NextAuth(authOptions)
  1. Then import sign/signout/ from next-auth/react and call on the login and signout button.

     import { signIn } from "next-auth/react"
                  className="bg-white border border-slate-200 hover:bg-white-100 dark:border-slate-700 dark:text-slate-100 p-10 rounded"
                  onClick={() => {
                  Login With GitHub

    With all these changes we will be able to GitHub log in.



Happy Coding :)

Did you find this article valuable?

Support Vijendra Rana by becoming a sponsor. Any amount is appreciated!