Authentication with NextJS 13 – Quick & Easy

Authentication is a crucial part of any web application. With the release of NextJS 13, authentication has become even easier with the introduction of next-auth and its support for GitHub Oauth.

Setting up next-auth with GitHub Oauth

To get started with authentication using next-auth and GitHub Oauth, you’ll first need to install the necessary packages:


npm install next-auth
npm install next-auth/providers


Next, you’ll need to configure the next-auth provider in your NextJS app. This can be done by creating a pages/api/auth/[...nextauth].js file and adding the following code:

    // pages/api/auth/[...nextauth].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
        })
      ]
    })
  

After setting up the provider, you can now use the next-auth hooks and components in your application to handle authentication. For example, you can use the useSession hook to access the user’s session information and use the signIn and signOut methods to handle user authentication:

    import { useSession, signIn, signOut } from 'next-auth/react'

    function MyComponent() {
      const { data: session } = useSession()

      return (
        

          {session ? Sign out : Sign in}
        
      )
    }
  

Conclusion

With the release of NextJS 13 and the introduction of next-auth with support for GitHub Oauth, implementing authentication in your NextJS app has become quick and easy. By following the steps outlined in this article, you can add authentication to your app in no time, allowing your users to securely log in with their GitHub accounts.