Mastering Authentication in Next.js 13: A Comprehensive Guide to Secure User Authentication
Tags: webdev, react, nextjs, auth
Published: 2023-06-01 14:08:05

## How to use NextAuth in NextJS 13?

Hey folks,

On this tutorial, I will teach you how to implement NextAuth in NextJS13.

### Here are the steps we need to do:
    - Install NextAuth
    - Create env file
    - Create a google api key clientId and clientSecret
### Install [NextAuth](https://next-auth.js.org/)
`npm i next-auth` or `yarn add next-auth`

### Create a google api keys
Create a google keys by going to [google developers](https://console.developers.google.com/apis/credentials)

or by following this [official tutorial](https://next-auth.js.org/providers/google)

### Create env file
Create env file in the same level as your app directory and add the keys to it.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xipbcle9nm6j5zqchz84.png)

### Code Implementation
Once done, we can start the fun part!
Create api\auth\[...nextauth] folder inside the app directory. After that create a file called `route.ts`. Your folder should look like this



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lavhsjkohrnc0l6pcvy.png)


and paste this code

```
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
/*
    Note: No secret provided since it's provided in .env.local
    read more: https://next-auth.js.org/configuration/options#secret

*/
const handler = NextAuth({
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!,
      clientSecret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET!,
    }),
  ],
  session: {
    maxAge: 60 * 60, // 1 hour
  },
});
export { handler as GET, handler as POST };

```

Now we're done implementing our next auth route. The next step will be implementing our SessionProvider.

### SessionProvider
Now go to your `layout.tsx` file and add SessionProvider from NextAuth.

Your code should look like this

```
'use client'
import { SessionProvider } from "next-auth/react";
import { Poppins } from "next/font/google";
import "normalize.css";
const inter = Poppins({
  weight: ["300", "500", "600", "700"],
  subsets: ["latin"],
});

export const metadata = {
  title: "Sneak",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <SessionProvider>
          <main>{children}</main>
        </SessionProvider>
      </body>
    </html>
  );
}

```

### Page
Now we will implement the signIn and signOut functions. Go to your page.tsx and copy this code. We will also check if the user is authenticated or not

```
"use client";

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

const Home = () => {
  const { data: session, status } = useSession();

  const handleSignin = () => {
    signIn("google");
  };

  const handleSignout = () => {
    signOut();
  };
  // this if condition will check if the user is authenticated or not
  if (status === "authenticated") {
    return (
      <div>
        <h1>{session.user?.email}</h1>
        <button onClick={handleSignout}>Logout</button>
      </div>
    );
  }
  return (
    <div>
      <button onClick={handleSignin}>Login Button</button>
    </div>
  );
};

export default Home;


```



Aaaaaaaand we're done!

### Bonus! NextAuth with Middleware
What is middleware? Middleware will run before any page is rendered on the browser. It means, we can protect our pages from unauthorize users.

Create a `middleware.ts` file with the same level as your app.

It should look like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gg59g3t2eqe7utaaksxi.png)

Now, inside the middleware file, paste this code

```
export { default } from "next-auth/middleware";

// this code will protect any attempts from unauthorize users that will try to access protected route.
export const config = { matcher: ["/protected/:path*"] };

```

Any unauthorize users will be force to signIn using their Google Accounts.


Thanks for reading!