[WIP] Firebase Auth Component

app/components/auth/NoUserAvatar.js

@@ -0,0 +1,22 @@
+import { FaUser } from "react-icons/fa";
+
+export function NoUserAvatar({size,name}){
+    const char = name ? name.charAt(0) : null;
+    return (
+        <div 
+            className="d-flex justify-content-center align-items-center"
+            style={{
+                width: `${size}px`, 
+                height: `${size}px`, 
+                background: "#dee2e6",
+                borderRadius: "50%"
+            }}>
+            {
+                char ?
+                <span style={{fontSize: `${size*0.65}px`}}>{char}</span>
+                :
+                <FaUser size={`${size*0.45}px`}/>
+            }
+        </div>
+    )
+}

app/components/auth/firebase/lib/constants.js

@@ -0,0 +1 @@
+export const FB_APP_NAME = '[DEFAULT]';

app/components/auth/firebase/lib/functions.js

@@ -0,0 +1,62 @@
+import { init } from 'next-firebase-auth'
+export const getFirebaseConfig = () => ({
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
+  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
+});
+
+
+export const initAuth = () => {
+  init({
+    loginAPIEndpoint: '/api/fb/login', // required
+    logoutAPIEndpoint: '/api/fb/logout', // required
+    onLoginRequestError: (err) => {
+      console.error(err)
+    },
+    onLogoutRequestError: (err) => {
+      console.error(err)
+    },
+    firebaseAdminInitConfig: {
+      credential: {
+        projectId: process.env.FIREBASE_PROJECT_ID,
+        clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
+        // The private key must not be accessible on the client side.
+        privateKey: process.env.FIREBASE_PRIVATE_KEY,
+      },
+      databaseURL: process.env.FIREBASE_DATABASE_URL,
+    },
+
+    firebaseClientInitConfig: {
+      apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, // required
+      authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+      databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
+      projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
+    },
+    cookies: {
+      name: 'RC4Community', // required
+      // Keys are required unless you set `signed` to `false`.
+      // The keys cannot be accessible on the client side.
+      keys: [
+        process.env.COOKIE_SECRET_CURRENT,
+        process.env.COOKIE_SECRET_PREVIOUS,
+      ],
+      httpOnly: true,
+      maxAge: 12 * 60 * 60 * 24 * 1000, // twelve days
+      overwrite: true,
+      path: '/',
+      sameSite: 'strict',
+      secure: true, // set this to false in local (non-HTTPS) development
+      signed: true,
+    },
+    onVerifyTokenError: (err) => {
+      console.error(err)
+    },
+    onTokenRefreshError: (err) => {
+      console.error(err)
+    },
+  })
+}

app/components/auth/firebase/styles/FirebaseAuthMenuButton.module.css

@@ -0,0 +1,45 @@
+.authDialogWrapper {
+    position: relative;
+}
+.authContainer {
+    display: block;
+    position: absolute;
+    right: 8px;
+    top: 62px;
+    width: 354px;
+    max-height: -webkit-calc(100vh - 62px - 100px);
+    max-height: calc(100vh - 62px - 100px);
+    overflow-y: auto;
+    overflow-x: hidden;
+    border-radius: 8px;
+    margin-left: 12px;
+    z-index: 991;
+    line-height: normal;
+    background: #fff;
+    border: 1px solid #ccc;
+    border-color: rgba(0,0,0,.2);
+    color: #000;
+    -webkit-box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+    box-shadow: 0 2px 10px rgb(0 0 0 / 20%);
+    -webkit-user-select: text;
+    user-select: text;
+}
+
+.avatar {
+    background: var(--bs-gray-300);
+    border-radius: 50%;
+    width: 42px;
+    height: 42px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.avatarButton {
+    background: none;
+    border: none;
+}
+
+.avatarButton:focus {
+    outline: none;
+}

app/components/auth/firebase/styles/FirebaseAuthUI.module.css

@@ -0,0 +1,7 @@
+.authUIWrapper {
+    width: 100%;
+    max-width: 400px;
+    border: 1px solid #ddd;
+    box-shadow: 2px 2px 3px 3px #0000001D;
+    background: #FFF;
+}

app/components/auth/firebase/ui/FirebaseAuthMenuButton.js

@@ -0,0 +1,32 @@
+import { useState } from "react";
+import { useAuthUser } from "next-firebase-auth";
+import { FirebaseAuthUI } from "./FirebaseAuthUI";
+import { NoUserAvatar } from "../../NoUserAvatar";
+import styles from "../styles/FirebaseAuthMenuButton.module.css";
+export function FirebaseAuthMenuButton({}){
+    const user = useAuthUser();
+    const [isOpen,setOpen] = useState(false);
+    return (
+        <div className={styles.authDialogWrapper}>
+            <div className={styles.avatar}>
+                <button className={styles.avatarButton} onClick={() => setOpen(!isOpen)}>
+                    <span className="d-flex align-items-center">
+                        {
+                            user?.photoURL ?
+                            <img src={user.photoURL}
+                                alt={user.displayName}
+                                className="rounded-circle"
+                                height="42px"
+                                width="42px" />
+                            :
+                            <NoUserAvatar name={user?.displayName} size="42" />
+                        }
+                    </span>
+                </button>
+            </div>
+            { isOpen &&
+                <div className={styles.authContainer}><FirebaseAuthUI/></div>
+            }
+        </div>
+    )
+}

app/components/auth/firebase/ui/FirebaseAuthUI.js

@@ -0,0 +1,45 @@
+import { useAuthUser } from "next-firebase-auth";
+import { FirebaseLoginForm } from "./FirebaseLoginForm";
+import { useState } from "react";
+import { Button } from "react-bootstrap";
+import { FirebaseSignupForm } from "./FirebaseSignupForm";
+import { FirebaseUserInfo } from "./FirebaseUserInfo";
+import styles from '../styles/FirebaseAuthUI.module.css';
+
+export function FirebaseAuthUI(){
+    const user = useAuthUser();
+    const [signupVisible,setSignupVisible] = useState(false);
+    if(user.id){
+        return (
+            <div className={styles.authUIWrapper}> 
+                <FirebaseUserInfo/>
+            </div>
+        );
+    } else if(signupVisible){
+        return (
+            <div className={styles.authUIWrapper}>
+                <div className="w-100 p-1 d-flex align-items-center justify-content-center bg-light">
+                    <Button
+                        style={{position: "absolute", left: "5px"}}
+                        variant="light"
+                        size="sm"
+                        onClick={()=>setSignupVisible(false)}>
+                        &lt; back
+                    </Button>
+                    &nbsp;
+                    <span>Sign up</span>
+                </div>
+                <FirebaseSignupForm onSignupComplete={()=>setSignupVisible(false)}/>
+            </div>
+        );
+    } else {
+        return (
+            <div className={styles.authUIWrapper}>
+                <div className="w-100 p-1 d-flex align-items-center justify-content-center bg-light">
+                    <span>Log in</span>
+                </div>
+                <FirebaseLoginForm onSignupClick={()=>setSignupVisible(true)}/>
+            </div>
+        );
+    }
+}

app/components/auth/firebase/ui/FirebaseLoginForm.js

@@ -0,0 +1,162 @@
+import { 
+    EmailAuthProvider, 
+    FacebookAuthProvider, 
+    fetchSignInMethodsForEmail, 
+    getAuth, 
+    GoogleAuthProvider, 
+    linkWithCredential, 
+    OAuthProvider, 
+    signInWithEmailAndPassword, 
+    signInWithPopup 
+} from "firebase/auth";
+import {getApp} from 'firebase/app';
+import { useState } from "react";
+import { FormControl, Alert, Button } from "react-bootstrap";
+import {FB_APP_NAME} from '../lib/constants';
+export function FirebaseLoginForm({onSignupClick}){
+    const [email,setEmail] = useState("");
+    const [password,setPassword] = useState("");
+    const [errorMessage,setError] = useState("");
+    const [diffCredError,setDiffCredError] = useState(null);
+    const [progress,setProgress] = useState(false);
+
+    const doEmailPasswordLogin = async (e) => {
+        e.preventDefault();
+        if(progress){
+            return true;
+        }
+        setProgress(true);
+        try {
+            const fbApp = getApp(FB_APP_NAME);
+            const userCred = await signInWithEmailAndPassword(getAuth(fbApp),email,password);
+
+            if(diffCredError?.oldProvider?.providerId === EmailAuthProvider.PROVIDER_ID){
+                // The signin was requested to link new credentials with the account 
+                await linkWithCredential(userCred.user,OAuthProvider.credentialFromError(diffCredError.error));
+            }
+
+        } catch(error){
+            switch(error.code){
+                case 'auth/user-not-found':
+                    setError("User not found");
+                    break;
+                case 'auth/wrong-password':
+                    setError("Incorrect Password");
+                    break;
+                default:
+                    setError("Unknown error occurred");
+            }
+        } finally {
+            setProgress(false);
+        }
+    }
+    const handleProviderSignIn = async provider => {
+        if(progress){
+            return;
+        }
+        const fbApp = getApp(FB_APP_NAME);
+        const auth = getAuth(fbApp);
+        try {
+            const userCred = await signInWithPopup(auth,provider);
+            if(diffCredError){
+                // The signin was requested to link new credentials with the account 
+                await linkWithCredential(userCred.user,OAuthProvider.credentialFromError(diffCredError.error));
+            }
+        } catch (e){
+            switch(e.code){
+                case 'auth/popup-closed-by-user':
+                case 'auth/cancelled-popup-request':
+                    break;
+                case 'auth/popup-blocked':
+                    setError("Popup blocked by your browser.")
+                    break;
+                case 'auth/account-exists-with-different-credential':
+                    const methods = await fetchSignInMethodsForEmail(auth,e.customData.email);;
+                    setDiffCredError({error: e, newProviderId: provider.providerId ,oldProviderId: methods[0]});
+                    break;
+                default:
+                    setError("Unknown error occurred");
+            }
+            setProgress(false);
+        }
+    }
+
+    const onGoogleBtnClick = () => {
+        if(progress){
+            return;
+        }
+        setProgress(true);
+        const provider = new GoogleAuthProvider();
+        handleProviderSignIn(provider);
+    }
+
+    const onFacebookBtnClick = () => {
+        if(progress){
+            return;
+        }
+        setProgress(true);
+        const provider = new FacebookAuthProvider();
+        handleProviderSignIn(provider);
+    }
+
+    return (
+        <div className="container-fluid p-1">
+            <form className="container-fluid" onSubmit={doEmailPasswordLogin}>
+                <FormControl
+                    type="text" 
+                    placeholder="email" 
+                    className="mb-1" 
+                    disabled={progress}
+                    onChange={e=> setEmail(e.target.value)}/>
+                <FormControl 
+                    type="password" 
+                    placeholder="password" 
+                    className="mb-1"
+                    disabled={progress}
+                    onChange={e => setPassword(e.target.value)}/>
+                {
+                    errorMessage &&
+                    <Alert variant="danger" className="mb-1">{errorMessage}</Alert>
+                }
+                <div className="d-flex justify-content-between">
+                    <Button 
+                        type="submit" 
+                        className="mb-1" 
+                        disabled={progress}>
+                            Login
+                    </Button>
+                    <Button 
+                        className="mb-1" 
+                        variant="light"
+                        disabled={progress}
+                        onClick={onSignupClick}>
+                        Sign up
+                    </Button>
+                </div>
+            </form>
+            <div className="container-fluid d-flex flex-column">
+                <Button 
+                    variant="danger" 
+                    className="mb-1"
+                    onClick={onGoogleBtnClick} 
+                    disabled={progress}>
+                        Sign in with Google
+                </Button>
+                <Button 
+                    className="mb-1"
+                    onClick={onFacebookBtnClick}  
+                    disabled={progress}>
+                        Sign in with Facebook
+                </Button>
+            </div>
+            {
+                diffCredError &&
+                <div className="p-1 mb-1">
+                    <Alert variant="danger" className="mb-1">
+                        User's email already exists. Sign in with {diffCredError.oldProviderId} to link your {diffCredError.newProviderId} account.
+                    </Alert>
+                </div>
+            }
+        </div>
+    )
+}