Prevent certain email domains from registering

[madd86]

Story: As an app developer, my app is developed for organizations with different domains than Gmail, Outlook, Hotmail, and so on. I'd like to prevent those users from signing up and show them an appropriate error message to understand why they're being turned down.

auth.server.ts

export const authenticator = new Authenticator(sessionStorage, {
  sessionKey: 'userId',
});

authenticator.use(
  new GoogleStrategy(
    {
      clientID: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
      scope: [
        "openid",
        "email",
        "profile",
        "https://www.googleapis.com/auth/drive",
      ],
      callbackURL: `http://localhost:3000/auth/${SocialsProvider.GOOGLE}/callback`,
    },
    async ({ profile }) => {
      const name = profile.displayName;
      const email = profile.emails[0].value;
      const picture = profile.photos[0].value;

      const user = await findOrCreateUser({
        email,
        name,
        picture,
      });

      // check if the email is a free email
      if (user.email.endsWith("@gmail.com")) {
        return "Invalid";
      }

     // other code logic to register in DB

auth.google.callback.tsx

import { authenticator } from "../services/auth.server";
import { SocialsProvider } from "remix-auth-socials";
import { LoaderFunction } from "@remix-run/server-runtime";

export const loader: LoaderFunction = async ({ request }) => {
  return await authenticator.authenticate(
    SocialsProvider.GOOGLE,
    request,
    {
      successRedirect: "/auth/success",
      failureRedirect: "/",
    }
  );
};

auth.success.tsx

export const loader: LoaderFunction = async ({ request }) => {
    return await authenticator.isAuthenticated(
        request,
        {
            failureRedirect: "/",
        }
    );
};

export default function AuthSuccessPage() {
    const [, setIsLoggedIn] = useAtom(loggedInAtom);

    useEffect(() => {
        setIsLoggedIn(true);
        window.close();
    }, []);
    return <></>;
}

The above code will work to prevent users with @gmail from accessing the application. However, I can't seem to display an appropriate message.

If I remove the successRedirect on callback, I can check if the userId is invalid and redirect to the message I'd like the user to see. But then I can't seem to redirect on success anymore and thus break login altogether.

How can I prevent & show a custom message that I don't allow gmail accounts?

[sergiodxa]

You can use the sessionErrorKey to access the errors, check https://github.com/sergiodxa/remix-auth#errors-handling

[madd86]

Yeah, that hits the mark, thank you Sergiodxa.