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​
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!

Auth - Previous

Google sign in

Next - Auth

Database Auth

Last modified 2yr ago

Copy link