Skip to content

Commit 742333f

Browse files
author
Alex Patterson
committed
add back firebaseui
1 parent e0ef4e4 commit 742333f

6 files changed

Lines changed: 121 additions & 107 deletions

File tree

‎frontend/main/package-lock.json‎

Lines changed: 45 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/main/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"cross-env": "^7.0.3",
2727
"firebase": "^9.1.2",
2828
"firebase-admin": "^9.4.2",
29+
"firebaseui": "^0.600.0",
2930
"gray-matter": "^4.0.2",
3031
"js-cookie": "^2.2.1",
3132
"logrocket": "^2.1.1",

‎frontend/main/src/components/FirebaseAuth.tsx‎

Lines changed: 60 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,88 @@
1-
import { useState } from 'react';
1+
import React, { useState } from 'react';
22
import Link from 'next/link';
3-
4-
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
5-
import firebaseApp from 'firebase/app';
6-
import initFirebase from '@/utils/initFirebase';
73
import { useEffect } from 'react';
84

5+
import { getApp } from '@firebase/app';
6+
import {
7+
EmailAuthProvider,
8+
FacebookAuthProvider,
9+
getAuth,
10+
GithubAuthProvider,
11+
GoogleAuthProvider,
12+
signInWithEmailAndPassword,
13+
TwitterAuthProvider,
14+
} from '@firebase/auth';
15+
import * as firebaseui from 'firebaseui';
16+
import 'firebaseui/dist/firebaseui.css';
17+
18+
let ui: firebaseui.auth.AuthUI;
19+
let uiConfig: firebaseui.auth.Config;
20+
921
const FirebaseAuth = ({ full = true }: { full?: boolean }): JSX.Element => {
10-
const [app, setApp] = useState<firebaseApp.app.App>();
1122
const [email, setEmail] = useState('');
1223
const [password, setPassword] = useState('');
13-
const [
14-
firebaseAuthConfig,
15-
setFirebaseAuthConfig,
16-
] = useState<firebaseui.auth.Config>();
17-
18-
const setDynamicFirebase = async () => {
19-
const app = await initFirebase();
20-
if (app) {
21-
setApp(app);
22-
}
23-
};
24-
25-
useEffect(() => {
26-
setDynamicFirebase();
27-
}, []);
24+
const app = getApp();
25+
const auth = getAuth(app);
2826

2927
useEffect(() => {
30-
if (!app) {
31-
return;
32-
}
3328
let signInOptions = [];
3429
if (full) {
3530
signInOptions = [
36-
firebaseApp.auth.EmailAuthProvider.PROVIDER_ID,
37-
firebaseApp.auth.GoogleAuthProvider.PROVIDER_ID,
38-
firebaseApp.auth.FacebookAuthProvider.PROVIDER_ID,
39-
firebaseApp.auth.TwitterAuthProvider.PROVIDER_ID,
40-
firebaseApp.auth.GithubAuthProvider.PROVIDER_ID,
31+
EmailAuthProvider.PROVIDER_ID,
32+
GoogleAuthProvider.PROVIDER_ID,
33+
FacebookAuthProvider.PROVIDER_ID,
34+
TwitterAuthProvider.PROVIDER_ID,
35+
GithubAuthProvider.PROVIDER_ID,
4136
'apple.com',
4237
'microsoft.com',
4338
'yahoo.com',
4439
];
4540
} else {
4641
signInOptions = [
47-
firebaseApp.auth.EmailAuthProvider.PROVIDER_ID,
48-
firebaseApp.auth.GoogleAuthProvider.PROVIDER_ID,
49-
firebaseApp.auth.TwitterAuthProvider.PROVIDER_ID,
50-
firebaseApp.auth.GithubAuthProvider.PROVIDER_ID,
42+
EmailAuthProvider.PROVIDER_ID,
43+
GoogleAuthProvider.PROVIDER_ID,
44+
TwitterAuthProvider.PROVIDER_ID,
45+
GithubAuthProvider.PROVIDER_ID,
5146
];
5247
}
5348

5449
// https://github.com/firebase/firebaseui-web#configure-oauth-providers
55-
const config: firebaseui.auth.Config = {
50+
uiConfig = {
5651
signInFlow: 'popup',
5752
signInOptions,
5853
signInSuccessUrl: window.location.href,
5954
credentialHelper: 'none',
60-
tosUrl: `${window.location.origin}/terms`,
55+
tosUrl: `${window.location.origin}/terms-of-use`,
6156
// Privacy policy url/callback.
6257
privacyPolicyUrl() {
63-
window.open(`${window.location.origin}/privacy`);
58+
window.open(`${window.location.origin}/privacy-policy`);
6459
},
6560
};
66-
setFirebaseAuthConfig(config);
67-
}, [app, full]);
61+
checkUi();
62+
}, [app, auth, full]);
6863

69-
function signin(email: string, password: string) {
70-
if (app) {
71-
app
72-
.auth()
73-
.signInWithEmailAndPassword(email, password)
74-
.then(() => {
75-
console.log('Successfully SignedIn');
76-
})
77-
.catch((error) => {
78-
console.log(error);
79-
});
64+
const checkUi = async () => {
65+
if (ui) {
66+
await ui.delete();
67+
}
68+
ui = new firebaseui.auth.AuthUI(auth);
69+
};
70+
71+
useEffect(() => {
72+
if (!ui || !uiConfig) {
73+
return;
8074
}
75+
ui.start('#firebaseui-auth-container', uiConfig);
76+
}, [ui, uiConfig]);
77+
78+
function signin(email: string, password: string) {
79+
signInWithEmailAndPassword(auth, email, password)
80+
.then(() => {
81+
console.log('Successfully SignedIn');
82+
})
83+
.catch((error) => {
84+
console.log(error);
85+
});
8186
}
8287

8388
return (
@@ -129,13 +134,10 @@ const FirebaseAuth = ({ full = true }: { full?: boolean }): JSX.Element => {
129134
</div>
130135
) : (
131136
<>
132-
{app && firebaseAuthConfig ? (
133-
<div className="grid justify-center">
134-
<StyledFirebaseAuth
135-
uiConfig={firebaseAuthConfig}
136-
firebaseAuth={app.auth()}
137-
/>
138-
{!full && (
137+
<div className="grid justify-center">
138+
<div id="firebaseui-auth-container"></div>
139+
140+
{/* {!full && (
139141
<Link href="/user/profile">
140142
<a>
141143
<div className="firebaseui-container firebaseui-page-provider-sign-in firebaseui-id-page-provider-sign-in firebaseui-use-spinner">
@@ -175,11 +177,8 @@ const FirebaseAuth = ({ full = true }: { full?: boolean }): JSX.Element => {
175177
</div>
176178
</a>
177179
</Link>
178-
)}
179-
</div>
180-
) : (
181-
<></>
182-
)}
180+
)} */}
181+
</div>
183182
</>
184183
)}
185184
</>

‎frontend/main/src/components/user/AvatarMenu.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Link from 'next/link';
22
import Image from 'next/image';
3+
import router, { useRouter } from 'next/router';
34

45
import ActiveLink from '@/components/ActiveLink';
56
import { Dispatch, SetStateAction, useEffect, useState } from 'react';
@@ -22,6 +23,7 @@ export default function UserSignin({
2223
const app = getApp();
2324
const auth = getAuth(app);
2425
const { data: signInCheckResult } = useSigninCheck();
26+
const router = useRouter();
2527

2628
useEffect(() => {
2729
if (signInCheckResult && signInCheckResult.user) {
@@ -143,7 +145,11 @@ export default function UserSignin({
143145
href="#"
144146
className="flex items-center p-2 text-sm rounded-md text-basics-900 hover:bg-primary-50 dark:hover:bg-primary-900 dark:hover:text-basics-50"
145147
role="menuitem"
146-
onClick={() => signOut(auth)}
148+
onClick={() => {
149+
signOut(auth);
150+
setUserMenu(false);
151+
router.replace('/');
152+
}}
147153
>
148154
<svg
149155
className="w-8 transform -scale-1"

‎frontend/main/src/pages/user/profile.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,12 @@ import { useSigninCheck } from 'reactfire';
99
import { StripeProduct } from '@/models/stripe.model';
1010
import UserMembership from '@/components/user/UserMembership';
1111
import MembershipCards from '@/components/user/MembershipCards';
12+
import dynamic from 'next/dynamic';
13+
14+
const FirebaseAuth = dynamic(() => import('@/components/FirebaseAuth'), {
15+
ssr: false,
16+
loading: () => <p>Playing with yarn...</p>,
17+
});
1218

1319
export default function Profile({
1420
site,
@@ -40,7 +46,8 @@ export default function Profile({
4046
) : (
4147
<>
4248
<div className="relative z-0 w-full mx-auto lg:w-1/2">
43-
<FirebaseSignin />
49+
{/* <FirebaseSignin /> */}
50+
<FirebaseAuth />
4451
</div>
4552
<section className="grid grid-cols-1 gap-10 text-center">
4653
<div className="max-w-xl mx-auto">

‎frontend/main/src/utils/initFirebase.ts‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

0 commit comments

Comments
 (0)