Send additional parameters on SignIn() with GoogleProvider

[zanzlender]

I have a special use case for my login.

Quick run down:

• I have 2 login forms for Users/Admins which are on the same page
• The auth logic for these 2 roles is different
• I want credentials and Google login

Because of the fact that i have 2 forms and 2 roles, I want to send the user's role (depending on which form the user sent) together with the SignIn() request.
With credentials provider I can do something like this:

signIn("credentials", {
      redirect: false,
      password: "password",
      email: "[email protected]",
      userType: "coach",
    });

and all these properties appear in the authorize callback inside CredentialsProvider. ✔

But now I want to do the same thing with GoogleProvider. In the docs I found only signIn("google"), but i tried it like credentials just to see. Which looks something like this:

signIn("google", { 
      userType: "user" 
    });

Although it works like this, no matter what I send, somewhere along the way these additional properties (userType) get lost.... And I can't access them inside [..nextauth].ts. I also tried to override the profile but still can't access these additional parameters from request like with CredentialsProvider.

Anyone has some idea how I could do this? 🤯

[zanzlender]

UPDATE

I found the answer, in case anyone encounters this as well.

As per the docs Next-Auth Additional Parameters I added my parameter inside Google's authorization parameter, like so:

GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        authorization: {
          params: {
            prompt: "consent",
            access_type: "offline",
            response_type: "code",
            userType: "user" || "admin",  <-- THIS ONE
          },
        },
      }),

The problem was that the additional parameters don't arrive in the signIn callback, where I run my logic, and I didn't feel like creating my own file for Google's callback. For a reminder I send them like so:

signIn("google", { userType: "user" })

Because of that I tried using the OG request before it enters the Google OAuth cycle, and save that parameter into a global variable, like so:

let userType = "";

export default async function auth(req: NextApiRequest, res: NextApiResponse) {
      // Do whatever you want here, before the request is passed down to `NextAuth`
      if (req.body.userType !== undefined) {
             userType = req.body.userType;
      };
  }

And it works! 🤯 However since this is triggered on each request sent between Next-auth and Google, we need to check if the userType parameter is not undefined, so we don't overwrite it. After that I can use it in any callback like this:

callbacks: {
      async signIn({ user, account, profile, email, credentials }) {
          if (account.provider === "google") {
                if (profile.email_verified && profile.email.endsWith("@gmail.com")) {
                       if (userType === "user") { }   <-- THIS
                }
         }
     },
}

[VictorKolb]

@nimeshvaghasiya you need to double check getServerSideProps called before signIn() and cookie was set to browser. You can do it on Network tab in devtools. Select your request and check cookie tab.

[nimeshvaghasiya]

@VictorKolb I can confirm It hits getServerSideProps, and sets register = true in browser network tab. Then I have redirected to discord oauth provider on button click, then It is not accessible into signin() callback(...nextauth.ts) using req.cookies.

[nimeshvaghasiya]

If I set it up using cookies-next > setCookie('register', 'true'); I get the register cookie in signin() callback. I'm unsure why it isn't available when I have set it using context.res.setHeader('set-cookie', ['register=true']);

[VictorKolb]

@nimeshvaghasiya Looks strange. Think you need to debugging this

[mkilincaslan]

thanks @zanzlender this is savior answer! 🙌

[arisAlexis]

setting a cookie to delete later in the process is really a weird way of doing this. Since next-auth provides a way to send these params to the api backend there should be a much simpler way to retrieve them.

[khuezy]

How would you get the parameter (from signIn('google', {}, { parameter: 'hi' }) to the jwt callback? The parameter gets sent to google oauth's endpoint but it's missing from the auth callback query.

[ofir-shapira-como]

@khuezy did you manage to get the parameter in the JWT callback?

[khuezy]

Nope, I ended up using cookies that expired in a minute to pass data through

[shamoons]

How did you set the cookie?

[khuezy]

@shamoons on the client side: document.cookie = "thing=value; path=/; expires=<UTC date string>"
in the jwt callback, you can use cookies().set('thing', '', {expires: 0}) to immediately remove it.

[davidreis97]

There really should be a better way to do this than cookies. I use the EmailProvider so it's not uncommon for mobile users to start account creation on one browser and then click the login link on their email which opens an entirely different browser, which breaks the cookies hack suggested by @VictorKolb.

[djs42012]

Anyone have updates to share here? Found myself down this rabbit hole last night and concluded cookies are still the only solution. Is there a technical reason why the query parameters aren't available in the callback? It already seems weird enough that we can't pass anything to the signIn() call to post directly to a database via one of the adapters. I'm just here because I want to store more info upon account creation than nextauth provides functionality for. It all seems so strange that I feel like I'm missing something.

[huychau]

One more solution, just get the data from request by add the specific params to the redirectUrl. We can get the param values by accessing req.cookies?.['next-auth.callback-url'].

await signIn('google', {redirectUrl: '/?userType=user'})

In [...nextauth].ts

export default async function auth(req: NextApiRequest, res: NextApiResponse) {
  return await NextAuth(req, res, {
    providers: [
      GoogleProvider({
        clientId: process.env.GOOGLE_CLIENT_ID || '',
        clientSecret: process.env.GOOGLE_CLIENT_SECRET || '',
      }),
    ],
  
    callbacks: {
      async jwt(params) {
        const callbackUrl = req.cookies?.['next-auth.callback-url'] ||  req.cookies?.['__Secure-next-auth.callback-url']
        
        // Get the params from callbackUrl
      },
    }
  });
}

[khuezy]

But now the url has the param in it. Is there a way to remove it after grabbing the value from the cookie? This solution still uses cookies though.

[carrilhorafael57]

I had the same issue. I was actually retrieving the user from the db to pass some more information to the session and could not figure out a way to do that.

My solution was actually to make an api call inside the JWT callback. I am setting the token with the information that I need and passing it to the session:

` async jwt({ token, account, user, trigger, session }) {

  // CHECK WHETHER THE USER LOGIN WITH PROVIDER OR CREDENTIALS TO SET THE TOKEN 
  if (account?.provider === "google" || account?.provider === "facebook") {
    const userData = await retrieveUser(account);

    token.user = userData;
    token.accessToken = account.access_token;
  } else if (account?.provider === "credentials") {
    token.user = user;
    token.accessToken = account.access_token;
  }

  if (trigger === "update") {
    token.user = session.user;
  }


  return token;
},`

Hope it helps someone.

[drattansingh]

This isn't pretty but it seems to work.

Client:
signIn('google', { usertype: 'super administrator' })

Server: [...nextauth].js

import fs from 'fs';
import path from 'path';
import {v4 as uuidv4} from 'uuid'

const tempfile=uuidv4()+'.txt' // generated unique name of the file
export default async function auth(request, response){
  // write the user type to a temporary file
  const filePath=path.join(process.cwd(), tempfile)
  if(request.body?.usertype!==undefined) fs.writeFileSync(filePath, request.body.usertype)
  
  return await NextAuth(request, response,{
	callbacks: {
		async jwt({ token, user, account }){
                        if(account?.provider==='google'){
                            // Read the client key from the tmp file and then delete the file
                            const filePath=path.join(process.cwd(), tempfile)
                            const usertype=fs.readFileSync(filePath, 'utf-8')
                            fs.unlinkSync(filePath)// delete the file
		            console.log(usertype) // --> this prints out : super administrator
                            .......
                        }
                return token;
            }

[khuezy]

Would not recommend since you're doing i/o

[dhruv9499]

still not proper solution guys ?

[davidreis97]

The solution:

https://auth0.com/
https://supabase.com/
https://clerk.com/

[drattansingh]

Using cookies seems to be the only viable way to do this

[xcaeser]

The solution:

https://auth0.com/ https://supabase.com/ https://clerk.com/

lmao

[Tushant-Sharma]

This method is working fine for me .

file : [...nextauth/route.tsx]
`let userType: string | null = "";

async function auth(req: NextApiRequest, res: NextApiResponse) {

const url = new URL(req.url || "");

if (url.searchParams.get("usertype")) {
  userType = url.searchParams.get("usertype");
}

return await NextAuth(req, res, {
  ...NEXTAUTH_OPTIONS,
  callbacks: {
    async signIn({ user, account, profile, email, credentials }) {
      console.log("\n\n\n\n\n", userType, "\n\n\n\n\n");
      return "/dashboard";
    },
  },
});

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

use the function to send the params :

        `  await signIn('google', {
            callbackUrl: "/foo",
            redirect: true,
          }, {
          usertype: 'adminlikedin',
            scope: 'openid email profile',
          });`

[khuezy]

Don't do this, userType is at the top level scope and it will cause race conditions when you have multiple requests. This WILL cause issues in your application.

[pnutmath]

For Next AppRouter we can do something like this

// app/api/auth/[...nextauth]/route.ts
import { getNextAuth } from "@/auth";
import { NextRequest, NextResponse } from "next/server";

async function customHandler(req: NextRequest, res: NextResponse) {
  if (!req.method) return;

  const { handlers }: { handlers: { [key: string]: any } } = getNextAuth(req);

  const response = await handlers[req.method](req, res);
  return response;
}

export { customHandler as GET, customHandler as POST };

and getNextAuth function as below

// auth.ts
import NextAuth from "next-auth";
import { NextRequest } from "next/server";

export function getNextAuth(req: NextRequest): {
  handlers: { [key: string]: any };
} {
  return NextAuth({ ... })
}

[xcaeser]

For Next AppRouter we can do something like this

// app/api/auth/[...nextauth]/route.ts

import { getNextAuth } from "@/auth";

import { NextRequest, NextResponse } from "next/server";



async function customHandler(req: NextRequest, res: NextResponse) {

  if (!req.method) return;



  const { handlers }: { handlers: { [key: string]: any } } = getNextAuth(req);



  const response = await handlers[req.method](req, res);

  return response;

}



export { customHandler as GET, customHandler as POST };

and getNextAuth function as below

// auth.ts

import NextAuth from "next-auth";

import { NextRequest } from "next/server";



export function getNextAuth(req: NextRequest): {

  handlers: { [key: string]: any };

} {

  return NextAuth({ ... })

}

never seen such a confusing reply. no explanation has been provided.
no example usage provided.