Google sign in custom domain
This should be accompanied by database security rules.
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​
1
const provider = new firebase.auth.GoogleAuthProvider();
2
provider.setCustomParameters({
3
hd: "example.com"
4
});
Copied!
Wrapped in a function inside a react hook component
1
const signIn = () => {
2
const provider = new firebase.auth.GoogleAuthProvider();
3
provider.setCustomParameters({
4
hd: "wsj.com"
5
});
6
​
7
firebase
8
.auth()
9
.signInWithPopup(provider)
10
.then(function(result) {
11
// This gives you a Google Access Token. You can use it to access the Google API.
12
var token = result.credential.accessToken;
13
// The signed-in user info.
14
var user = result.user;
15
console.log("signed-in", user);
16
// ...
17
})
18
.catch(function(error) {
19
// Handle Errors here.
20
var errorCode = error.code;
21
var errorMessage = error.message;
22
// The email of the user's account used.
23
var email = error.email;
24
// The firebase.auth.AuthCredential type that was used.
25
var credential = error.credential;
26
console.log("error", error);
27
// ...
28
});
29
};
Copied!
in context in a react hook component
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
faHeadphones,
10
faFileAudio,
11
faSignOutAlt,
12
faSignInAlt,
13
faUser
14
} from "@fortawesome/free-solid-svg-icons";
15
import Container from "react-bootstrap/Container";
16
import CustomNotice from "../CustomNotice";
17
​
18
function CustomNavbar(props) {
19
const { firebase } = props;
20
// eslint-disable-next-line react-hooks/exhaustive-deps
21
useEffect(() => {
22
const unsubscribe = firebase.auth().onAuthStateChanged(user => {
23
if (user) {
24
props.handleUserChange(true);
25
} else {
26
props.handleUserChange(false);
27
}
28
});
29
​
30
// clean up
31
// https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1
32
return function cleanup() {
33
// TODO: add some clean up logic here for logout?
34
unsubscribe();
35
};
36
}, []);
37
​
38
const signIn = () => {
39
const provider = new firebase.auth.GoogleAuthProvider();
40
provider.setCustomParameters({
41
hd: "wsj.com"
42
});
43
​
44
firebase
45
.auth()
46
.signInWithPopup(provider)
47
.then(function(result) {
48
// This gives you a Google Access Token. You can use it to access the Google API.
49
var token = result.credential.accessToken;
50
// The signed-in user info.
51
var user = result.user;
52
console.log("signed-in", user);
53
// ...
54
})
55
.catch(function(error) {
56
// Handle Errors here.
57
var errorCode = error.code;
58
var errorMessage = error.message;
59
// The email of the user's account used.
60
var email = error.email;
61
// The firebase.auth.AuthCredential type that was used.
62
var credential = error.credential;
63
console.log("error", error);
64
// ...
65
});
66
};
67
​
68
return (
69
<>
70
<Navbar sticky="top" bg="light" expand="md">
71
<Navbar.Brand href="/#">
72
{" "}
73
<FontAwesomeIcon icon={faHeadphones} size="1x" />
74
Transcriber App
75
</Navbar.Brand>
76
<Navbar.Toggle aria-controls="basic-navbar-nav" />
77
<Navbar.Collapse id="basic-navbar-nav">
78
{firebase.auth().currentUser ? (
79
<Nav>
80
<Nav.Link href="#/new-mic-recording">
81
<FontAwesomeIcon
82
icon={faMicrophone}
83
title="New Mic Record"
84
size="1x"
85
/>{" "}
86
New
87
</Nav.Link>
88
</Nav>
89
) : null}
90
<Nav className="mr-auto"></Nav>
91
<Nav>
92
{firebase.auth().currentUser ? (
93
<>
94
<Nav.Link href="#/list-recordings">
95
<FontAwesomeIcon
96
icon={faFileAudio}
97
title="Transcripts"
98
size="1x"
99
/>{" "}
100
Transcripts
101
</Nav.Link>
102
<Nav.Link style={{cursor: 'default'}}>
103
{firebase.auth().currentUser.email}{" "}
104
</Nav.Link>
105
<Nav.Link
106
onClick={() => firebase.auth().signOut()}
107
title={`sign out ${firebase.auth().currentUser.displayName}`}
108
>
109
<FontAwesomeIcon icon={faSignOutAlt} />
110
</Nav.Link>
111
</>
112
) : (
113
<Nav.Link onClick={signIn} title={`sign In`}>
114
{"Sign in "}
115
<FontAwesomeIcon icon={faSignInAlt} />
116
</Nav.Link>
117
)}
118
</Nav>
119
<></>
120
</Navbar.Collapse>
121
</Navbar>
122
​
123
{navigator.onLine ? null : (
124
<Container>
125
<br />
126
<CustomNotice
127
variant={"warning"}
128
title={"Offline"}
129
description={"You are offline"}
130
/>
131
</Container>
132
)}
133
</>
134
);
135
}
136
​
137
export default CustomNavbar;
138
​
Copied!
Last modified 1yr ago
Copy link