How to limit domain for Google provider

[arnodel]

Hi there, I am trying to convert a project from v1 to v2. I have some difficulties with restricting the domain users can choose. In v1 I had in next-auth.providers.js the following.

    providers.push({
      providerName: "Google",
      providerOptions: {
        scope: ["profile", "email"],
        hd: "mydomain.com"
      },
      // [...]
    });

The hd provider option only allowed users to sign in with an email in the mydomain.com domain. In v2 I don't know how to achieve that. I tried

    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
      hd: "mydomain.com",
    }),

But that has no effect. Is there a way to achieve this in v2? It's a very important feature for me.

[LoriKarikari]

I think that parameter isn't currently supported. I'll check it out and update the provider if needed.

[iaincollins]

From a quick search it seems maybe Google call this option hostedDomain now?

We don't currently support it, but seems like a thing we would want to!

Edit: Updated callback syntax for v3:

As Google include an profile.email_verified property, you can also enforce access controls using the signIn() callback you can do something like this.

callbacks: {
  signIn: async (user, account, profile) => {
    if (account.provider === 'google' &&
        profile.verified_email === true &&
        profile.email.endsWith('@example.com')) {
      return Promise.resolve(true)
    } else {
       return Promise.resolve(false)
    }
  },
}

[DevBrent]

This is incorrect and unsafe. The HD claim is the only way to guarantee the account is an account from that domain. You can not and should not use "email" and trust the "verified_email" to confirm ownership of a domain account.

See:
https://trufflesecurity.com/blog/google-oauth-is-broken-sort-of/
https://medium.com/intigriti/how-i-hacked-hundreds-of-companies-through-their-helpdesk-b7680ddc2d4c

[arnodel]

Thanks @iaincollins, I will implement the callback as it will help. It would be good if the hd/hostedDomain parameter was implemented - perhaps I can look into it if I have some time but I think it may be non-trivial as it appears the underlying library implementing oauth has changed from passport-google-oauth to oauth - I don't know how the latter would support it.

[ndom91]

@arnodel as a workaround, and this is what I currently do, you can explicitly define your oauth credentials to be able to be used internally only. That way Google itself will take care of only allowing people / accounts from inside your domain.

[iaincollins]

@ndom91 Oh that's neat, thank you, I didn't know you could do that.

[arnodel]

@ndom91 That's interesting - if I understand you correctly, I don't think I can use that though as the domain for this app is not the domain of our users' gmail account.

[ndom91]

@arnodel no, that's not necessary, its only necessary that the account with which you created the google developer console project and generated the oauth token, be a part of the users gmail domain.

I just double checked, and I guess its Project-wide however, not on a key by key basis.

So in the Google Dev Console, once you've selected your project, you can go to "OAuth Consent Screen" in the left menu. There you can select "Public" or "Internal" application.

EDIT: Sorry didn't mean to hijack this thread, obviously adding this option to next-auth would also be a good feature. Especially for other oauth providers where this is not an option in their settings.

[arnodel]

@ndom91 Thank you! That would be great if I can get it configured like this.

[ThewBear]

I can get it works by passing custom authorizationUrl and appending the hd parameter.

const options = {
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
      authorizationUrl:
        "https://accounts.google.com/o/oauth2/auth?response_type=code&hd=domain.com", // hosted domain is domain.com
    }),
  ],
};

Note for hosted domain feature: Don't rely on this UI optimization to control who can access your app, as client-side requests can be modified. You still need to validate on your server side as in @iaincollins's comment

[arnodel]

I can get it works by passing custom authorizationUrl and appending the hd parameter.
[...]
Note for hosted domain feature: Don't rely on this UI optimization to control who can access your app, as client-side requests can be modified. You still need to validate on your server side as in @iaincollins's comment

It's great though, as it prevents users from inadvertently trying to sign in with an unauthorized account (as Google with narrow down the list of accounts to choose from).

[stale[bot]]

Hi there! It looks like this issue hasn't had any activity for a while. It will be closed if no further activity occurs. If you think your issue is still relevant, feel free to comment on it to keep ot open. Thanks!

[ThewBear]

Maybe we can add my solution to the docs?

[balazsorban44]

Would you be interested in opening a PR @ThewBear?

[sofalvigergo-webery]

Add callback ./pages/api/auth/[...nextauth].ts file:

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

export default NextAuth({
    callbacks: {
        async signIn({ account, profile }) {
          if (account.provider === "google") {
            return profile.email_verified && profile.email.endsWith("@webery.com")
          }
        },
      },
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_CLIENT_ID as string,
            clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
        }),
    ],
    
})

[VicSmithVercel]

TypeScript Error on :

const emailVerified = profile?.email_verified

typscript error:

Property 'email_verified' does not exist on type 'Profile'.ts(2339)

I do see the property in the documentation:
https://github.com/nextauthjs/next-auth/blob/main/packages/next-auth/src/providers/google.ts

What might I be missing?

[boyan-balev-ft]

Same issue with me.

[tedspare]

What's the full NextAuth config? Is this within the async signIn() callback?

[RahimGuerfi]

anyone managed to fix this issue?

[Nazar-D-Aleannlab]

@arnodel If I understood correctly, the requirements should help

import GoogleProvider from "next-auth/providers/google";
import { env } from "../../../config/env";
import {
  GetServerSidePropsContext,
  NextApiRequest,
  NextApiResponse,
} from "next";
import NextAuth, { NextAuthOptions } from "next-auth";

const allowedDomains = [
  //...domains
];

export const getNextAuthOptions = (
  req: NextApiRequest | GetServerSidePropsContext["req"],
  res: NextApiResponse | GetServerSidePropsContext["res"]
) => {
  const { host } = req.headers; 

  const authOptions: NextAuthOptions = {
    providers: [
      GoogleProvider({
        clientId: env.GOOGLE_CLIENT_ID as string,
        clientSecret: env.GOOGLE_CLIENT_SECRET as string,
      }),
    ],
    callbacks: {
      async signIn() {
        const isAllowedToSignIn = allowedDomains.some(domain => host?.includes(domain))
        if (isAllowedToSignIn) {
          return true
        } else {
          return false
        }
      }
    },
    secret: env.SECRET as string,
  };

  return authOptions;
};

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const authOptions = getNextAuthOptions(req, res);
  return NextAuth(req, res, authOptions);
}

[ZuhebNadeem]

https://stackoverflow.com/questions/77270139/how-to-properly-limit-google-provider-domain-in-next-auth/77692172#77692172

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

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID ?? '',
      clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? '',
      authorization:
        'https://accounts.google.com/o/oauth2/auth?response_type=code&hd=domain.com'
    })
  ]
};
export default NextAuth(authOptions);

OR

import NextAuth, { AuthOptions } from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export const authOptions: AuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID ?? '',
      clientSecret: process.env.GOOGLE_CLIENT_SECRET ?? ''
    })
  ],
  callbacks: {
    async signIn({ user }) {
      if (user.email && user.email.endsWith('@domain.com')) {
        return true;
      } else {
        return false;
      }
    }
  }
};

export default NextAuth(authOptions);