Kinde•14mo ago

Restricting Google Domains

I'm working on replacing <GoogleOAuthProvider ...> in my React frontend with <KindeProvider ...>. <GoogleOAuthProvider ...> creates a popup window that restricts signin to Google accounts for a specific domain. In my case that's inrange.io I have configured Kinde with the same Google Client ID which I was using with <GoogleOAuthProvider ...>, but the signin prompt appears to accept signins from any domain. Can you help me understand why?

11 Replies

MartinOP•14mo ago

Oli - Kinde•14mo ago

Hi @Martin, I'll ask my team and get back to you on this. Keep the questions coming. Hi @Martin, We are still looking into the best way to solve what you are after. I'll get back to you once I have more information. Hey @Martin, So assuming you you want to provide a login with Google method that restricts login to domains with inrange.io, you can achieve this by doing the following. If you want to restrict sign-ins to a specific domain in Kinde, you would need to implement this restriction in your application logic. For example, after a user signs in, you could check the domain of their email address and if it's not from the allowed domain (could also do a check to see if user.email is not null and if it ends in inrange.io), you could sign them out and show an error message. Here's a simple example of how you could do this in a React component:

import {useKindeAuth} from '@kinde-oss/kinde-auth-react';

const { user, logout } = useKindeAuth();

React.useEffect(() => {
  if (user && !user.email.endsWith('@inrange.io')) {
    logout();
    alert('You can only sign in with an @inrange.io account');
  }
}, [user, logout]);

import {useKindeAuth} from '@kinde-oss/kinde-auth-react';

const { user, logout } = useKindeAuth();

React.useEffect(() => {
  if (user && !user.email.endsWith('@inrange.io')) {
    logout();
    alert('You can only sign in with an @inrange.io account');
  }
}, [user, logout]);

In this example, useKindeAuth is a hook provided by Kinde that gives you access to the current user and a logout function. The React.useEffect hook runs whenever the user or logout changes. If there's a user and their email doesn't end with '@inrange.io', it logs them out and shows an error message. Please note that this is a simple example and you might want to handle this in a different way in your application, depending on your specific requirements and user experience considerations. Let me know if you have any questions.

MartinOP•14mo ago

If you want to restrict sign-ins to a specific domain in Kinde, you would need to implement this restriction in your application logic.

I think it should be possible to implement this directly in the Google login form. This is certainly possible with the <GoogleOAuthProvider ...>. Specifically, using <GoogleOAuthProvider clientId="580941988699-9mtsjs3att3dghs3sciclo4e9n5e473p.apps.googleusercontent.com"> and

      <GoogleLogin
        onSuccess={logUserIn}
        onError={errorMessage}
        theme="filled_blue"
        logo_alignment="center"
        size="large"
        shape="pill"
        useOneTap={false}
        hosted_domain="inrange.io"
      />

      <GoogleLogin
        onSuccess={logUserIn}
        onError={errorMessage}
        theme="filled_blue"
        logo_alignment="center"
        size="large"
        shape="pill"
        useOneTap={false}
        hosted_domain="inrange.io"
      />

results in the Google sign in box with the inrange.io domain pre-filled in. Would it be possible for Kinde to support passing through hosted_domain through to the Google login?

Oli - Kinde•14mo ago

Hey @Martin, Let me get back to you on this. Hey @Martin, We are looking into a solution on the Kinde end with hosted_domain. I will keep you informed. Hi @Martin, We have built a prototype that uses hosted_domain, but this is a hint and does not retrict sign-ins to Google with that domain (i.e. you can still sign in with Google with any domain). Does this hint satisfy your needs at the moment?

Oli - Kinde•14mo ago

See the attached recording

MartinOP•14mo ago

That's really interesting! I didn't know that this was just a hint. However, I'd still love to be able to show that hint if possible. That demo looks like exactly what I'm looking for. Thanks for moving so quickly on this!

Oli - Kinde•14mo ago

No worries, there is a PR for the hint. Ill let you know when its live.

MartinOP•14mo ago

Perfect, thanks!

Oli - Kinde•13mo ago

Hey @Martin, We are revisiting the PR to make the hint for all those social providers that accept a hint, so it will be a bit longer than initially expected before this change is live and you can give a hint to Google sign-up/in. Is this blocking you from going live with Kinde?

MartinOP•13mo ago

Thanks for the update. This isn't blocking for us. Looking forward to getting this new feature 🙂

Oli - Kinde•13mo ago

Noted. I will let you know once this is live.

Gaming

Programming

Restricting Google Domains