How to override scopes & redirect_uri to signin

[benoror]

Question 💬

TL;DR; Need to grant additional OAuth scopes after the user have signed up/in, besides email

Use-case: After a user have signed up to our website, they can optionally opt-in to grant acces to Google Spreadsheets, so an additional scope such as https://www.googleapis.com/auth/spreadsheets ...more should be granted by opening a new Consent screen with extended permissions

I've seen in the docs callbacks can be used to things such as Refresh Token Rotation (which is something I would need as well), but I am still not sure how to use those for the incremental scope use-case, or how to simply trigger a new Consent screen with extended scopes.

• Google docs on incremental auth: https://developers.google.com/identity/sign-in/web/incremental-auth
• Related to: Is there a way set google's scope in [...nextauth].ts file #1160, Help: Request is missing required authentication credential when adding google scopes #1277, Not getting a refresh_token back from Google provider #408, Is there a way to change permissions for providers #1040

Ay hit would be greatly appreciated! Thanks 🙏

[balazsorban44]

So if I am not mistaken, the documentation you refer to make the user go through a sign-in process again, but this time with additional scopes in the URL. Access tokens once issued, cannot be modified. You will need a new one with new scopes in it.

This can be achieved with the signIn method, where the third argument is the parameters you want to pass. So you can add your new scopes there as additional request params.

https://datatracker.ietf.org/doc/html/rfc6749#section-3.3

https://next-auth.js.org/getting-started/client#additional-params

[benoror]

sweet, here it is: #2079

[balazsorban44]

3.24.0 should include this change! Could you verify that it solves your use case?

[benoror]

It works! FYI: I had to pass an empty object as second argument:

return signin('google', {}, { scope: scopes.join(', ') }

otherwise I would get undefined callbackUrl of null

[SteveSonoa]

Just wanted to thank you both. I'm also setting up incremental authorization with Google OAuth, and this was incredibly helpful. Really appreciate the conversation and answers presented. I was up and running quickly. Thanks!

[namdao2000]

Hey guys, thank you so much! However, I am almost there -- I am trying to access the user's Gmail with this code using Prisma and Postgresql in login.tsx

export default function Login() {
  return (
    <div>
      <button
        onClick={() =>
          signIn(
            "google",
            {},
            {
              scope: "https://www.googleapis.com/auth/gmail.readonly",
            }
          )
        }
      >
        Sign in with Google
      </button>
    </div>
  );
}

However, google is throwing this error in the console

[next-auth][error][OAUTH_CALLBACK_ERROR] 
https://next-auth.js.org/errors#oauth_callback_error id_token not present in TokenSet {
  error: TypeError: id_token not present in TokenSet
      at Client.validateIdToken (/Users/namdao/sortable.ai/node_modules/openid-client/lib/client.js:737:15)
      at Client.callback (/Users/namdao/sortable.ai/node_modules/openid-client/lib/client.js:488:18)
      at runMicrotasks (<anonymous>)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async oAuthCallback (/Users/namdao/sortable.ai/node_modules/next-auth/core/lib/oauth/callback.js:127:16)
      at async Object.callback (/Users/namdao/sortable.ai/node_modules/next-auth/core/routes/callback.js:52:11)
      at async AuthHandler (/Users/namdao/sortable.ai/node_modules/next-auth/core/index.js:201:28)
      at async NextAuthHandler (/Users/namdao/sortable.ai/node_modules/next-auth/next/index.js:23:19)
      at async /Users/namdao/sortable.ai/node_modules/next-auth/next/index.js:59:32
      at async Object.apiResolver (/Users/namdao/sortable.ai/node_modules/next/dist/server/api-utils/node.js:363:9)
      at async DevServer.runApi (/Users/namdao/sortable.ai/node_modules/next/dist/server/next-server.js:487:9)
      at async Object.fn (/Users/namdao/sortable.ai/node_modules/next/dist/server/next-server.js:749:37)
      at async Router.execute (/Users/namdao/sortable.ai/node_modules/next/dist/server/router.js:253:36)
      at async DevServer.run (/Users/namdao/sortable.ai/node_modules/next/dist/server/base-server.js:384:29)
      at async DevServer.run (/Users/namdao/sortable.ai/node_modules/next/dist/server/dev/next-dev-server.js:741:20)
      at async DevServer.handleRequest (/Users/namdao/sortable.ai/node_modules/next/dist/server/base-server.js:322:20) {
    name: 'OAuthCallbackError',
    code: undefined
  },
  providerId: 'google',
  message: 'id_token not present in TokenSet'
}

Any help will be greatly appreciated ❤️

[benoror]

Hey @balazsorban44, there's one more thing I might need for my use case 🙈. TL;DR; I would like to override redirect_uri as well 😬

Long story short: My use-case involve having the user grant access to Google Spreadsheets for long-running API data access, independently from their sign-in sessions to our app, therefore I need to have a different redirect_uri that would capture the access & refresh tokens for data access, without the need of the user to have a valid session in the frontend app itself:

1. User signup/login into the app (regular redirect_uri)
2. User grants access to Spreadsheet(s) and tokens are saved separately (overriden redirect_uri, not even saved in accounts table)
3. User potentially logs out, or his 1st session gets expired, then 2nd token can still be used to access Spreadsheets data long after that

So, it would be just a matter of moving up redirect_uri one line above, just wanted to confirm as you expressed some concerns regarding that

Thanks! 😄

[benoror]

Fair enough, gonna explore the 2 providers or custom callback options, thanks for the info!

[balazsorban44]

Let me know about your findings!

[benoror]

Looks like it works beautifully! And since I can specify a different provider.id it would just work with existing accounts db table, where I can fetch tokens for further access. Thanks a bunch, appreciate your time answering my questions!

[lewis-cobry]

Hey, I'm trying to use the access token from the GoogleProvider to authorise some API calls to Google Workspace, but I'm having a problem where the access token expires after an hour and I don't have a refresh token to get a new access token. Is there a way I can use the access token to refresh it? Or is there a way for next auth to automatically refresh it once it has expired?

[syedamanat]

@lewis-cobry the below does the trick for me; the refresh token auto saves in the jwt given its access_type: 'offline' hope this helps!

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

async function refreshAccessToken(token) {
	try {
		const url = 'https://oauth2.googleapis.com/token';
		const response = await fetch(url, {
			method: 'POST',
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded',
			},
			body: new URLSearchParams({
				client_id: process.env.GOOGLE_CLIENT_ID,
				client_secret: process.env.GOOGLE_CLIENT_SECRET,
				grant_type: 'refresh_token',
				refresh_token: token.refreshToken, // Use the stored refresh token
			}),
		});

		const refreshedTokens = await response.json();
		console.log('refreshedTokens:', refreshedTokens);
		if (!response.ok) {
			throw refreshedTokens; // Handle any errors
		}

		// Return the new tokens and update the expiration time
		return {
			...token,
			accessToken: refreshedTokens.access_token,
			accessTokenExpires: Date.now() + refreshedTokens.expires_in * 1000, // Update expiration time
			refreshToken: refreshedTokens.refresh_token ?? token.refreshToken, // Reuse or replace the refresh token
		};
	} catch (error) {
		console.error('Error refreshing access token:', error);
		return {
			...token,
			error: 'RefreshAccessTokenError', // Flag error in the token
		};
	}
}

export const authOptions = {
	providers: [
		GoogleProvider({
			clientId: process.env.GOOGLE_CLIENT_ID,
			clientSecret: process.env.GOOGLE_CLIENT_SECRET,
			authorization: {
				params: {
					scope: 'openid email profile',
					access_type: 'offline', // Request offline access to get a refresh token
					prompt: 'consent', // Ensures refresh token is returned every time
				},
			},
		}),
	],
	callbacks: {
		async jwt({ token, account, user }) {
			if (account && user) {
				if (account.provider === 'google') {
					token.accessToken = account.access_token; //shows up in backed session
					token.scope = account.scope;
					token.accessTokenExpires = Date.now() + account.expires_in * 1000;
					token.refreshToken = account.refresh_token;
					token.user = user;
				}
				return token;
			}

			// Return previous token if the access token has not expired yet
			if (Date.now() < token.accessTokenExpires) {
				return token;
			}

			// Access token has expired, refresh it
			return refreshAccessToken(token);
		},

		async session({ session, token }) {
			session.accessToken = token.accessToken;
			session.user.fruit = 'Apple';
			session.scope = token.scope;
			session.error = token.error;
			return session;
		},
	},
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

[fardeenes7]

I have the same app and the same next auth routes for admin and regular users. I needed users to log in normally, and admins to have YouTube permission. I created a different button for the admins with additional scopes.

signIn(
  "google",
  {},
  {
    scope:
      "https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/youtube",
  },
);