-
Notifications
You must be signed in to change notification settings - Fork 1
/
LoginBarrier.tsx
95 lines (89 loc) · 2.93 KB
/
LoginBarrier.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
import React, { ReactElement } from 'react';
import firebase from 'firebase/app';
import { FirebaseAuth } from 'react-firebaseui';
import styles from './Login.module.css';
import { cacheAppUser, toAppUser } from '../../../firebase/auth';
import initListeners from '../../../firebase/listeners';
const uiConfig = {
signInFlow: 'popup',
signInOptions: [
{
provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
customParameters: { hd: 'cornell.edu' },
}],
signInSuccessUrl: '/',
callbacks: {
// Avoid redirects after sign-in.
signInSuccessWithAuthResult: () => false,
},
};
type Props = { readonly appRenderer: () => ReactElement };
type LoginStatus = boolean | 'UNDECIDED';
/**
* The login barrier component.
* This component will stop non-logged-in user from accessing other parts of the application.
* It will only render the app given in a function is the user is signed in.
*
* @param appRenderer the function to call when the login flow finishes.
*/
export default function LoginBarrier({ appRenderer }: Props): ReactElement {
const [loginStatus, setLoginStatus] = React.useState<LoginStatus>('UNDECIDED');
const [loaded, setLoaded] = React.useState(false);
// Listen for auth state changes in effect hooks.
React.useEffect(() => {
firebase.auth().onAuthStateChanged((user) => {
toAppUser(user).then((currentUserFromFirebase) => {
if (currentUserFromFirebase === null) {
setLoginStatus(false);
setLoaded(false);
return;
}
const { email } = currentUserFromFirebase;
if (email.endsWith('@cornell.edu')) {
cacheAppUser(currentUserFromFirebase);
setLoginStatus(true);
} else {
const alertMessage = 'You should sign in with your Cornell email!';
firebase.auth().signOut().then(() => {
// eslint-disable-next-line no-alert
alert(alertMessage);
// eslint-disable-next-line no-restricted-globals
location.reload(false);
});
}
});
});
}, [loginStatus]);
// The effect of loading data when login finishes
React.useEffect(() => {
if (loginStatus !== true) {
return () => {};
}
if (!loaded) {
initListeners(() => setLoaded(true));
}
return () => {};
}, [loginStatus, loaded]);
if (loaded) {
// It will be loaded only if the user is signed in, so we can render!
return appRenderer();
}
const loadingOrLogin = loginStatus === false
? (
<>
<FirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
<div className={styles.LoginPadding} />
</>
)
: (<h3>Loading...</h3>);
return (
<div className={styles.Login}>
<div className={styles.LoginWrapper}>
<h1 className={styles.LoginText}>Samwise</h1>
{loadingOrLogin}
<h4>Made by Cornell DTI</h4>
<h4>Cornell Design & Tech Initiative</h4>
</div>
</div>
);
}