**Question**: How do I use [Next-Auth](https://next-auth.js.org/)?

**Answer**: Great question, and hopefully I have a fairly straightforward answer for you. First off [Next-Auth](https://next-auth.js.org/) is a library, not a authentication service provider (e.g. GitHub, Google, Facebook, Apple, etc.). So you are going to have to integrate with one of those, or provide a [database adapter to your own database of users](https://authjs.dev/reference/adapters). Thankfully the integration is pretty easy.

Let's try out integrating with GitHub. The first thing you are going to want to do is to get yourself an OAuth token. To do that, start by going to the `Developer Settings` sections of your `Settings` page. From there click on `OAuth Apps` menu item and then click the `Register a new application` button. 

From here you name your application. For the `Homepage URL` field use `http://localhost:3000/` and then for the `Authorization callback URL` use `http://localhost:3000/api/auth/callback/github`. You'll want to have two of these tokens, one for development, which is what we just created. And another for production.

When you hit `Register application` you'll go to another page that has a client ID, that you need to copy and paste into a `.env` file in your App Router NextJS application with the name `GITHUB_ID`. And then get the secret key and put that into the `.env` file as the `GITHUB_SECRET` key.

Now we are all set up and we can create install `next-auth` by running:

```sh
pnpm add next-auth
```

Or whatever package manager you use.

Now we need to create the API callback that we configured on the GitHub OAuth account. To do that we create a new API route in `/app/api/auth/[...nextauth]/route.ts`, with the contents:

```ts
import NextAuth from "next-auth";
import GitHubProvider from "next-auth/providers/github";

export const options = {
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID ?? "",
      clientSecret: process.env.GITHUB_SECRET ?? "",
    }),
  ],
};

export const handler = NextAuth(options);

export { handler as GET, handler as POST };
```

Now restart the application and go to `/api/auth/signin` and you should get a login provider selector page. Click on the GitHub button and go through the flow and you should be returned to your home page with a session.

You can create an `AuthButton` component to put some UI on this, like so:

```ts
"use client";
import { signIn, signOut, useSession } from "next-auth/react";

export default function AuthButton() {
  const { data: session } = useSession();

  if (session) {
    return (
      <>
        {session?.user?.name} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </>
  );
}
```

Add `AuthButton` to your `layout.tsx` file and now you can sign in and sign out with ease. And you can get the details for the currently logged in user from either `useSession` in a client component or `getServerSession` in an RSC.

Learn how to easily add user authentication to your App Router NextJS app.