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;