Merge pull request #17 from sinatra-pod/ian/fixes

Fix authentication issues.

.github/workflows/firebase-hosting-merge.yml

@@ -22,6 +22,16 @@ permissions:
   security-events: write
   statuses: write
 
+env:
+  REACT_APP_FIREBASE_API_KEY: '${{ secrets.REACT_APP_FIREBASE_API_KEY }}'
+  REACT_APP_FIREBASE_APP_ID: '${{ secrets.REACT_APP_FIREBASE_APP_ID }}'
+  REACT_APP_FIREBASE_AUTH_DOMAIN: '${{ secrets.REACT_APP_FIREBASE_AUTH_DOMAIN }}'
+  REACT_APP_FIREBASE_MEASUREMENT_ID: '${{ secrets.REACT_APP_FIREBASE_MEASUREMENT_ID }}'
+  REACT_APP_FIREBASE_MESSAGE_SENDER_ID: '${{ secrets.REACT_APP_FIREBASE_MESSAGE_SENDER_ID }}'
+  REACT_APP_FIREBASE_PROJECT_ID: '${{ secrets.REACT_APP_FIREBASE_PROJECT_ID }}'
+  REACT_APP_FIREBASE_STORAGE: '${{ secrets.REACT_APP_FIREBASE_STORAGE }}'
+  REACT_APP_GOOGLE_AUTH_SCOPE: '${{ secrets.REACT_APP_GOOGLE_AUTH_SCOPE }}'
+
 jobs:
   build_and_deploy:
     runs-on: ubuntu-latest

.github/workflows/firebase-hosting-pull-request.yml

@@ -19,6 +19,17 @@ permissions:
   security-events: write
   statuses: write
 
+env:
+  REACT_APP_FIREBASE_API_KEY: '${{ secrets.REACT_APP_FIREBASE_API_KEY }}'
+  REACT_APP_FIREBASE_APP_ID: '${{ secrets.REACT_APP_FIREBASE_APP_ID }}'
+  REACT_APP_FIREBASE_AUTH_DOMAIN: '${{ secrets.REACT_APP_FIREBASE_AUTH_DOMAIN }}'
+  REACT_APP_FIREBASE_MEASUREMENT_ID: '${{ secrets.REACT_APP_FIREBASE_MEASUREMENT_ID }}'
+  REACT_APP_FIREBASE_MESSAGE_SENDER_ID: '${{ secrets.REACT_APP_FIREBASE_MESSAGE_SENDER_ID }}'
+  REACT_APP_FIREBASE_PROJECT_ID: '${{ secrets.REACT_APP_FIREBASE_PROJECT_ID }}'
+  REACT_APP_FIREBASE_STORAGE: '${{ secrets.REACT_APP_FIREBASE_STORAGE }}'
+  REACT_APP_GOOGLE_AUTH_SCOPE: '${{ secrets.REACT_APP_GOOGLE_AUTH_SCOPE }}'
+
+
 jobs:
   build_and_preview:
     if: '${{ github.event.pull_request.head.repo.full_name == github.repository }}'

src/hooks/auth/useEmailPasswordAuth.ts

@@ -0,0 +1,33 @@
+import { createUserWithEmailAndPassword, signInWithEmailAndPassword} from "firebase/auth";
+import { auth } from "../../utils/firebase";
+import {useNavigate} from "react-router-dom";
+import {storeUser} from "../../utils/authData";
+
+export const useEmailPasswordAuth = (isLogin: boolean = true, email: string, password: string, errCallback) => {
+    const navigate = useNavigate()
+
+    if(isLogin){
+        // login existing
+        return async (e) => {
+            e.preventDefault()
+            await signInWithEmailAndPassword(auth, email, password)
+                .then((credential) => {
+                    storeUser(credential.user.email)
+                    navigate('/')
+                })
+                .catch((error) => errCallback(error))
+        }
+    }else{
+        // register new account
+        return async (e) => {
+            e.preventDefault()
+            await createUserWithEmailAndPassword(auth, email, password)
+                .then((credential) => {
+                    storeUser(credential.user.email)
+                    navigate('/')
+                })
+                .catch((error) => errCallback(error))
+        }
+    }
+}
+

src/hooks/auth/useSocialAuth.ts

@@ -0,0 +1,37 @@
+import {signInWithPopup, GoogleAuthProvider, GithubAuthProvider} from "firebase/auth";
+import { auth } from "../../utils/firebase";
+import { useNavigate } from "react-router-dom";
+import {storeUser} from "../../utils/authData";
+
+export enum AuthType {
+    GOOGLE = 0,
+    GITHUB = 1,
+    FACEBOOK = 2
+}
+
+export const useSocialAuth = (type: AuthType = 0) => {
+    const navigate = useNavigate()
+
+    // set provider
+    let provider: GoogleAuthProvider | GithubAuthProvider | null = null
+    switch (type) {
+        case AuthType.GOOGLE:
+            provider = new GoogleAuthProvider()
+            break
+        case AuthType.GITHUB:
+            provider = new GithubAuthProvider()
+            break
+        case AuthType.FACEBOOK:
+            break
+    }
+
+    return async () => {
+        if(provider) await signInWithPopup(auth, provider)
+            .then((credential) => {
+                storeUser(credential.user.email)
+                navigate('/')
+            })
+            .catch((_e) => false)
+    }
+
+}

src/utils/authData.ts

@@ -0,0 +1,22 @@
+import {AuthData} from "./types";
+import {Constants} from "./constants";
+
+export const successAuth = (credential): AuthData => {
+    return {
+        status: 'success',
+        user_data: credential.user
+    }
+}
+
+export const failureAuth = (error): AuthData => {
+    return {
+        status: 'failed',
+        message: error.message
+    }
+}
+
+export const storeUser = (email) => localStorage.setItem(Constants.LOGGED_IN_USER, email)
+
+export const resetUser = () => localStorage.removeItem(Constants.LOGGED_IN_USER)
+
+export const getUser = (): string|null => localStorage.getItem(Constants.LOGGED_IN_USER)

src/utils/constants.ts

@@ -0,0 +1,3 @@
+export class Constants{
+    public static LOGGED_IN_USER = 'logged-in-user'
+}

src/utils/types.ts

@@ -1,4 +1,10 @@
 export type Numbers = {
     a: number,
     b: number
+}
+
+export type AuthData = {
+    status: string;
+    message?: string;
+    user_data?: any;
 }

src/views/Home.tsx

@@ -1,8 +1,13 @@
 import React from "react";
 import useHeader from "../hooks/useHeader";
+import {getUser} from "../utils/authData";
+import {useNavigate} from "react-router-dom";
 
 function Home() {
 
+    const navigate = useNavigate()
+    if (!getUser()) navigate('/login')
+
   // extract the header from the hook
   // Header extracted will be used to determine the current page