Google sign in custom domain

This should be accompanied by database security rules.

firebase.auth.GoogleAuthProvider

Firebase limit access to certain domains

Sets the OAuth custom parameters to pass in a Google OAuth request for popup and redirect sign-in operations. Valid parameters include 'hd', 'hl', 'include_granted_scopes', 'login_hint' and 'prompt'. For a detailed list, check the Google documentation. Reserved required OAuth 2.0 parameters such as 'client_id', 'redirect_uri', 'scope', 'response_type' and 'state' are not allowed and will be ignored

From setCustomParameters firebase docs

The domain in hd needs to be associated with G Suite domain

 const provider = new firebase.auth.GoogleAuthProvider();
    provider.setCustomParameters({
      hd: "example.com"
    });

Wrapped in a function inside a react hook component

const signIn = () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    provider.setCustomParameters({
      hd: "wsj.com"
    });

    firebase
      .auth()
      .signInWithPopup(provider)
      .then(function(result) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        console.log("signed-in", user);
        // ...
      })
      .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        console.log("error", error);
        // ...
      });
  };

in context in a react hook component

import React, { useEffect } from "react";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faMicrophone,
  faHeadphones,
  faFileAudio,
  faSignOutAlt,
  faSignInAlt,
  faUser
} from "@fortawesome/free-solid-svg-icons";
import Container from "react-bootstrap/Container";
import CustomNotice from "../CustomNotice";

function CustomNavbar(props) {
  const { firebase } = props;
  // eslint-disable-next-line react-hooks/exhaustive-deps
  useEffect(() => {
    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
      if (user) {
        props.handleUserChange(true);
      } else {
        props.handleUserChange(false);
      }
    });

    // clean up
    // https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1
    return function cleanup() {
      // TODO: add some clean up logic here for logout?
      unsubscribe();
    };
  }, []);

  const signIn = () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    provider.setCustomParameters({
      hd: "wsj.com"
    });

    firebase
      .auth()
      .signInWithPopup(provider)
      .then(function(result) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        console.log("signed-in", user);
        // ...
      })
      .catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        console.log("error", error);
        // ...
      });
  };

  return (
    <>
      <Navbar sticky="top" bg="light" expand="md">
        <Navbar.Brand href="/#">
          {" "}
          <FontAwesomeIcon icon={faHeadphones} size="1x" />
          Transcriber App
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          {firebase.auth().currentUser ? (
            <Nav>
              <Nav.Link href="#/new-mic-recording">
                <FontAwesomeIcon
                  icon={faMicrophone}
                  title="New Mic Record"
                  size="1x"
                />{" "}
                New
              </Nav.Link>
            </Nav>
          ) : null}
          <Nav className="mr-auto"></Nav>
          <Nav>
            {firebase.auth().currentUser ? (
              <>
                <Nav.Link href="#/list-recordings">
                  <FontAwesomeIcon
                    icon={faFileAudio}
                    title="Transcripts"
                    size="1x"
                  />{" "}
                  Transcripts
                </Nav.Link>
                <Nav.Link style={{cursor: 'default'}}>
                  {firebase.auth().currentUser.email}{" "}
                </Nav.Link>
                <Nav.Link
                  onClick={() => firebase.auth().signOut()}
                  title={`sign out ${firebase.auth().currentUser.displayName}`}
                >
                  <FontAwesomeIcon icon={faSignOutAlt} />
                </Nav.Link>
              </>
            ) : (
              <Nav.Link onClick={signIn} title={`sign In`}>
                {"Sign in "}
                <FontAwesomeIcon icon={faSignInAlt} />
              </Nav.Link>
            )}
          </Nav>
          <></>
        </Navbar.Collapse>
      </Navbar>

      {navigator.onLine ? null : (
        <Container>
          <br />
          <CustomNotice
            variant={"warning"}
            title={"Offline"}
            description={"You are offline"}
          />
        </Container>
      )}
    </>
  );
}

export default CustomNavbar;