How to get the Oauth providre access tokens from next auth/authjs

Modify your nextauth client and add a callbacks section that will

get the access token from the oauth provider
get the user profile from the oauth provider
store the access token and user profile in the session
store the access token and user profile in the token
modify the jwt payload to include the access token and user profile

typescript

1import NextAuth from "next-auth";
2import GitHub from "next-auth/providers/github";
3
4export const githubScopes = ["user", "repo", "delete_repo"] as const;
5
6export const { handlers, signIn, signOut, auth } = NextAuth({
7  pages: {
8    signIn: "/auth",
9  },
10  providers: [
11    GitHub({
12      authorization: {
13        params: {
14          scope: githubScopes.slice(0, -2).join(" "),
15        },
16      },
17      //  @ts-expect-error
18      async profile(profile) {
19      return { ...profile } // get the user oauth profile
20    },
21    }),
22  ],
23  debug: true,
24  callbacks: {
25    jwt: async ({ token, user,account }) => {
26      if (account) {
27        token.accessToken = account.access_token;
28      }
29      if (user) {
30        token.user = user; // Include the full user profile in the token
31      }
32      return token;
33
34    },
35    session: async ({ session, token }) => {
36      // @ts-expect-error
37      session.accessToken = token.accessToken; // Include the access token in the session
38      // @ts-expect-error
39      session.user = token.user;
40      return session;
41
42    },
43    authorized: async ({ auth }) => {
44      // Logged in users are authenticated, otherwise redirect to login page
45      return !!auth;
46    },
47      async redirect({ url, baseUrl }) {
48        // redirect to the dashboard if the user is signed in
49      return `${baseUrl}/dashboard`;
50    },
51  },
52});
53

to fix the types create a next-auth.d.ts file

typescript

1// next-auth.d.ts
2import "next-auth";
3import { DefaultSession } from "next-auth";
4
5declare module "next-auth" {
6  /**
7   * Extends the `Session` interface to include custom fields.
8   * This is merged with the default `Session` type from NextAuth.js.
9   */
10  interface Session {
11      accessToken?: string;
12    user: GithubUser & DefaultSession["user"]; // Merge with default user fields
13  }
14}
15
16export type GithubUser={
17  login: string
18  id: string
19  node_id: string
20  avatar_url: string
21  gravatar_id: string
22  url: string
23  html_url: string
24  followers_url: string
25    ....other fie;lds
26}
27

How to get the Oauth providre access tokens from next auth/authjs

How to select oauth scopes in next-auth / authjs

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Building Android Widgets in Expo with Custom Native Modules

How to get the Oauth providre access tokens from next auth/authjs

How to select oauth scopes in next-auth / authjs

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Building Android Widgets in Expo with Custom Native Modules

More posts

How to select oauth scopes in next-auth / authjs

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Building Android Widgets in Expo with Custom Native Modules

More posts

How to select oauth scopes in next-auth / authjs

Reasons to Still Use Next.js from a TanStack Start Enjoyer

Building Android Widgets in Expo with Custom Native Modules