Google sign in

Firebase Gmail Auth
// Add the Firebase services that you want to use
import "firebase/auth";

React

Firebase Auth has provided a parameter hd to limit accounts shown in Google OAuth UI:
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({
hd: "example.com"
});
Don't rely on this UI optimization to control who can access your app, as client-side requests can be modified. Be sure to validate that the returned ID token has an hd claim value that matches what you expect (e.g. mycolledge.edu). Unlike the request parameter, the ID token claim is contained within a security token from Google, so the value can be trusted.
However it is unclear if this is possibel with react-firebaseui or firebaseui. I raised issue Limit auth to a certain domain #78 to find out.
Meanwhile to do gmail auth CustomNavbar.js
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,
faPhone,
faCalendarAlt,
faHeadphones,
faFileAudio,
faFileUpload,
faSignOutAlt
} 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(() => {
firebase.auth().onAuthStateChanged(user => {
if (user) {
props.handleUserChange(true);
} else {
props.handleUserChange(false);
}
// this.props.handleUserChange(user)
});
// https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1
return function cleanup() {
// TODO: add some clean up logic here for logout?
};
}, []);
const uiConfig = {
// Popup signin flow rather than redirect flow.
signInFlow: "popup",
// Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
signInSuccessUrl: '/',
// We will display Google and Facebook as auth providers.
signInOptions: [firebase.auth?firebase.auth.GoogleAuthProvider.PROVIDER_ID : null]
};
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">
<Nav className="mr-auto">
</Nav>
<Nav>
<Nav.Link href="#/list-recordings">
<FontAwesomeIcon
icon={faFileAudio}
title="Transcripts"
size="1x"
/>{" "}
Transcripts
</Nav.Link>
</Nav>
<Nav>
{firebase.auth().currentUser ? (
<>
<Nav.Link
onClick={() => firebase.auth().signOut()}
title={`sign out ${firebase.auth().currentUser.displayName}`}
>
{" "}
{firebase.auth().currentUser.email}{" "}
<FontAwesomeIcon icon={faSignOutAlt} />
</Nav.Link>
</>
) : (
<StyledFirebaseAuth
uiConfig={uiConfig}
firebaseAuth={firebase.auth()}
/>
)}
</Nav>
</Navbar.Collapse>
</Navbar>
{navigator.onLine? null: <Container><br/><CustomNotice variant={'warning'} title={'Offline'} description={'You are offline'} /></Container>}
</>
);
}
export default CustomNavbar;
And here is an example using it another parent component
import React, { useState } from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faMicrophone,
faPhone,
faCalendarAlt,
faFileAudio,
faFileUpload
} from "@fortawesome/free-solid-svg-icons";
import { Link } from "react-router-dom";
import CustomFooter from "../../Components/CustomFooter";
import CustomNavbar from "../../Components/CustomNavbar";
import CustomNotice from "../../Components/CustomNotice";
import firebase from "../../Firebase.js";
function Home() {
const [user, setUser] = useState(null);
const handleUserChange = isUserSignedIn => {
setUser(isUserSignedIn);
};
return (
<>
<CustomNavbar firebase={firebase} handleUserChange={handleUserChange} />
{user ? (
<Container>
<br/>
<h1 className={"text-center"}>Make an audio recording</h1>
<p className={"text-center text-muted"}>
Make a recording to generate an automated transcription draft.
</p>
<br />
<br />
<Row className="d-flex justify-content-center">
<Col xs={12} sm={3} className={"text-center"}>
<Link to="/new-mic-recording">
<FontAwesomeIcon icon={faMicrophone} size="3x" />
</Link>
<br />
<br />
<p className={"text-muted"}>Record using your microphone </p>
</Col>
</Row>
<br />
<hr />
<br />
<Row>
<Col className={"text-center"}>
<Link to="/list-recordings">
<FontAwesomeIcon icon={faFileAudio} size="3x" />
</Link>
<br />
<br />
<p className={"text-muted"}> See recordings transcriptions</p>
</Col>
</Row>
<br />
<br />
<br />
<CustomFooter />
</Container>)
: (
<Container>
<br/>
<CustomNotice
variant={"info"}
title={"Login"}
description={"You need to login"}
/>
</Container>
)}
</>
);
}
export default Home;

Other Notes

Create a form that allows new users to register with your app using their email address and a password. When a user completes the form, validate the email address and password provided by the user, then pass them to the createUserWithEmailAndPassword method:
Can use Firebase UI instead?
signInSuccessUrl: function(currentUser, credential, redirectUrl) {
// No redirect.
return false;
},

limit auth to certain domain only

var provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({
hd: "example.com"
});
{
"rules": {
".read": "auth.token.email.matches(/.*@wsj.com$/)",
".write": "auth.token.email.matches(/.*@wsj.com$/)"
}
}

Firestore domain auth

rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /podcasts/{podcast=**} {
function isValidEmail(){
return (request.auth.token.email.matches('.*@wsj[.]com$') &&
request.auth.token.email_verified)
}
allow read, write: if isValidEmail();
}
}
}