Google sign in
Firebase Gmail Auth
​
1
// Add the Firebase services that you want to use
2
import "firebase/auth";
Copied!

React

​react-firebaseui​
Firebase Auth has provided a parameter hd to limit accounts shown in Google OAuth UI:
1
const provider = new firebase.auth.GoogleAuthProvider();
2
provider.setCustomParameters({
3
hd: "example.com"
4
});
Copied!
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
1
import React, { useEffect } from "react";
2
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
3
import Navbar from "react-bootstrap/Navbar";
4
import Nav from "react-bootstrap/Nav";
5
import NavDropdown from "react-bootstrap/NavDropdown";
6
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
import {
8
faMicrophone,
9
faPhone,
10
faCalendarAlt,
11
faHeadphones,
12
faFileAudio,
13
faFileUpload,
14
faSignOutAlt
15
} from "@fortawesome/free-solid-svg-icons";
16
import Container from 'react-bootstrap/Container';
17
import CustomNotice from '../CustomNotice';
18
​
19
function CustomNavbar(props) {
20
​
21
const { firebase } = props;
22
​
23
// eslint-disable-next-line react-hooks/exhaustive-deps
24
useEffect(() => {
25
firebase.auth().onAuthStateChanged(user => {
26
if (user) {
27
props.handleUserChange(true);
28
} else {
29
props.handleUserChange(false);
30
}
31
// this.props.handleUserChange(user)
32
});
33
​
34
// https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1
35
return function cleanup() {
36
// TODO: add some clean up logic here for logout?
37
};
38
}, []);
39
​
40
const uiConfig = {
41
// Popup signin flow rather than redirect flow.
42
signInFlow: "popup",
43
// Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
44
signInSuccessUrl: '/',
45
// We will display Google and Facebook as auth providers.
46
signInOptions: [firebase.auth?firebase.auth.GoogleAuthProvider.PROVIDER_ID : null]
47
};
48
​
49
return (
50
<>
51
<Navbar sticky="top" bg="light" expand="md">
52
<Navbar.Brand href="/#">
53
{" "}
54
<FontAwesomeIcon icon={faHeadphones} size="1x" />
55
Transcriber App
56
</Navbar.Brand>
57
<Navbar.Toggle aria-controls="basic-navbar-nav" />
58
<Navbar.Collapse id="basic-navbar-nav">
59
<Nav className="mr-auto">
60
</Nav>
61
<Nav>
62
<Nav.Link href="#/list-recordings">
63
<FontAwesomeIcon
64
icon={faFileAudio}
65
title="Transcripts"
66
size="1x"
67
/>{" "}
68
Transcripts
69
</Nav.Link>
70
</Nav>
71
<Nav>
72
{firebase.auth().currentUser ? (
73
<>
74
<Nav.Link
75
onClick={() => firebase.auth().signOut()}
76
title={`sign out ${firebase.auth().currentUser.displayName}`}
77
>
78
{" "}
79
{firebase.auth().currentUser.email}{" "}
80
<FontAwesomeIcon icon={faSignOutAlt} />
81
</Nav.Link>
82
</>
83
) : (
84
<StyledFirebaseAuth
85
uiConfig={uiConfig}
86
firebaseAuth={firebase.auth()}
87
/>
88
)}
89
</Nav>
90
</Navbar.Collapse>
91
</Navbar>
92
​
93
{navigator.onLine? null: <Container><br/><CustomNotice variant={'warning'} title={'Offline'} description={'You are offline'} /></Container>}
94
</>
95
);
96
}
97
​
98
export default CustomNavbar;
Copied!
And here is an example using it another parent component
1
import React, { useState } from "react";
2
​
3
import Container from "react-bootstrap/Container";
4
import Row from "react-bootstrap/Row";
5
import Col from "react-bootstrap/Col";
6
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
import {
8
faMicrophone,
9
faPhone,
10
faCalendarAlt,
11
faFileAudio,
12
faFileUpload
13
} from "@fortawesome/free-solid-svg-icons";
14
import { Link } from "react-router-dom";
15
import CustomFooter from "../../Components/CustomFooter";
16
import CustomNavbar from "../../Components/CustomNavbar";
17
import CustomNotice from "../../Components/CustomNotice";
18
import firebase from "../../Firebase.js";
19
​
20
function Home() {
21
const [user, setUser] = useState(null);
22
​
23
const handleUserChange = isUserSignedIn => {
24
setUser(isUserSignedIn);
25
};
26
​
27
return (
28
<>
29
<CustomNavbar firebase={firebase} handleUserChange={handleUserChange} />
30
{user ? (
31
<Container>
32
<br/>
33
<h1 className={"text-center"}>Make an audio recording</h1>
34
<p className={"text-center text-muted"}>
35
Make a recording to generate an automated transcription draft.
36
</p>
37
<br />
38
<br />
39
<Row className="d-flex justify-content-center">
40
<Col xs={12} sm={3} className={"text-center"}>
41
<Link to="/new-mic-recording">
42
<FontAwesomeIcon icon={faMicrophone} size="3x" />
43
</Link>
44
<br />
45
<br />
46
<p className={"text-muted"}>Record using your microphone </p>
47
</Col>
48
</Row>
49
<br />
50
<hr />
51
<br />
52
<Row>
53
<Col className={"text-center"}>
54
<Link to="/list-recordings">
55
<FontAwesomeIcon icon={faFileAudio} size="3x" />
56
</Link>
57
<br />
58
<br />
59
<p className={"text-muted"}> See recordings transcriptions</p>
60
</Col>
61
</Row>
62
<br />
63
<br />
64
<br />
65
<CustomFooter />
66
</Container>)
67
: (
68
<Container>
69
<br/>
70
<CustomNotice
71
variant={"info"}
72
title={"Login"}
73
description={"You need to login"}
74
/>
75
</Container>
76
)}
77
</>
78
);
79
}
80
​
81
export default Home;
Copied!

Other Notes

​firebaseui​
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?
1
signInSuccessUrl: function(currentUser, credential, redirectUrl) {
2
// No redirect.
3
return false;
4
},
Copied!

limit auth to certain domain only

1
var provider = new firebase.auth.GoogleAuthProvider();
2
provider.setCustomParameters({
3
hd: "example.com"
4
});
Copied!
1
{
2
"rules": {
3
".read": "auth.token.email.matches(/.*@wsj.com$/)",
4
".write": "auth.token.email.matches(/.*@wsj.com$/)"
5
}
6
}
Copied!

Firestore domain auth

1
rules_version = '2';
2
service cloud.firestore {
3
match /databases/{database}/documents {
4
match /podcasts/{podcast=**} {
5
function isValidEmail(){
6
return (request.auth.token.email.matches('.*@wsj[.]com#x27;) &&
7
request.auth.token.email_verified)
8
}
9
allow read, write: if isValidEmail();
10
}
11
}
12
}
Copied!
Last modified 2yr ago
Copy link