feat: add google oauht feature

Author: alfirmanpahlepi

.env.local.example

@@ -1,2 +1,8 @@
-REACT_APP_API_BASE_URL=https://example.com
-REACT_APP_TOKEN_KEY=EXAMPLE_TOKEN_KEY
+REACT_APP_API_BASE_URL=...
+REACT_APP_TOKEN_KEY=...
+REACT_APP_FIREBASE_API_KEY=...
+REACT_APP_FIREBASE_AUTH_DOMAIN=...
+REACT_APP_FIREBASE_PROJECT_ID=...
+REACT_APP_FIREBASE_STORAGE_BUCKET=...
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID=...
+REACT_APP_FIREBASE_APP_ID=...

README.md

@@ -26,8 +26,14 @@ yarn install
 Set up environment variable
 - Create .env.local file
 ```
-REACT_APP_API_BASE_URL=https://example.com
-REACT_APP_TOKEN_KEY=EXAMPLE_TOKEN_KEY
+REACT_APP_API_BASE_URL=...
+REACT_APP_TOKEN_KEY=...
+REACT_APP_FIREBASE_API_KEY=...
+REACT_APP_FIREBASE_AUTH_DOMAIN=...
+REACT_APP_FIREBASE_PROJECT_ID=...
+REACT_APP_FIREBASE_STORAGE_BUCKET=...
+REACT_APP_FIREBASE_MESSAGING_SENDER_ID=...
+REACT_APP_FIREBASE_APP_ID=...
 ```
 
 Finally, run the development server.

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.2",
+    "firebase": "^9.9.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-redux": "^8.0.2",

src/components/icons/GoogleIcon.js

@@ -0,0 +1,22 @@
+export default function GoogleIcon({ className }) {
+  return (
+    <svg className={className} viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12c0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24c0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
+        fill="#FFC107"
+      />
+      <path
+        d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
+        fill="#FF3D00"
+      />
+      <path
+        d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
+        fill="#4CAF50"
+      />
+      <path
+        d="M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
+        fill="#1976D2"
+      />
+    </svg>
+  );
+}

src/components/icons/index.js

@@ -16,6 +16,7 @@ import DollarSignIcon from './DollarSignIcon';
 import SignInIcon from './SignInIcon';
 import MenuIcon from './MenuIcon';
 import LogInIcon from './LogInIcon';
+import GoogleIcon from './GoogleIcon';
 
 export {
   HeartIcon,
@@ -36,4 +37,5 @@ export {
   SignInIcon,
   MenuIcon,
   LogInIcon,
+  GoogleIcon,
 };

src/constants/environment.js

@@ -1,2 +1,8 @@
 export const apiBaseURL = process.env.REACT_APP_API_BASE_URL;
 export const localStorageTokenKey = process.env.REACT_APP_TOKEN_KEY;
+export const firebaseApiKey = process.env.REACT_APP_FIREBASE_API_KEY;
+export const firebaseAuthDomain = process.env.REACT_APP_FIREBASE_AUTH_DOMAIN;
+export const firebaseProjectId = process.env.REACT_APP_FIREBASE_PROJECT_ID;
+export const firebaseStorageBucket = process.env.REACT_APP_FIREBASE_STORAGE_BUCKET;
+export const firebaseMessagingSenderId = process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID;
+export const firebaseFirebaseAppId = process.env.REACT_APP_FIREBASE_APP_ID;

src/hooks/dependent/useAuth.js

@@ -5,6 +5,7 @@ import { localStorageTokenKey } from '../../constants/environment';
 import { SET_ALERT } from '../../redux/slice/alert';
 import { CHANGE_AUTH, SET_TOKEN } from '../../redux/slice/auth';
 import { loginService, registerService } from '../../services/api/auth';
+import { getUserDataWithGoogle } from '../../services/firebase/auth';
 import useError from './useError';
 
 export default function useAuth() {
@@ -15,7 +16,7 @@ export default function useAuth() {
   const [loading, setLoading] = useState({ register: false, login: false });
   const errorHandler = useError();
 
-  async function register(name, email, password) {
+  async function register(name, email, password, autoLogin) {
     setLoading({ ...loading, register: true });
     try {
       const res = await registerService(name, email, password);
@@ -26,7 +27,7 @@ export default function useAuth() {
 
       dispatch(SET_ALERT([{ status: 'success', message: res.msg }]));
 
-      navigate('/login');
+      !autoLogin ? navigate('/login') : login(email, password);
     } catch (error) {
       errorHandler(error);
     } finally {
@@ -88,5 +89,37 @@ export default function useAuth() {
     dispatch(CHANGE_AUTH(true));
   }, [dispatch, isAuthenticated, pathname]);
 
-  return { loading, register, login, logout, checkToken };
+  async function registerWithGoogle() {
+    setLoading({ ...loading, register: true });
+    try {
+      const res = await getUserDataWithGoogle();
+
+      const isError = errorHandler(res);
+
+      if (isError) return;
+
+      register(res.displayName, res.email, res.uid, true);
+    } catch (error) {
+      errorHandler(error);
+      setLoading({ ...loading, register: false });
+    }
+  }
+
+  async function loginWithGoogle() {
+    setLoading({ ...loading, login: true });
+    try {
+      const res = await getUserDataWithGoogle();
+
+      const isError = errorHandler(res);
+
+      if (isError) return;
+
+      login(res.email, res.uid);
+    } catch (error) {
+      errorHandler(error);
+      setLoading({ ...loading, login: false });
+    }
+  }
+
+  return { loading, register, login, logout, checkToken, registerWithGoogle, loginWithGoogle };
 }

src/pages/Login.js

@@ -1,13 +1,14 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { PrimaryButton, BackButton } from '../components/buttons';
+import { GoogleIcon } from '../components/icons';
 import { LabelPasswordInput, LabelTextInput } from '../components/inputs';
 import { AuthLayout } from '../components/layouts';
 import useAuth from '../hooks/dependent/useAuth';
 import AuthenticationRoute from '../routes/AuthenticationRoute';
 
 export default function Login() {
-  const { login, loading } = useAuth();
+  const { login, loading, loginWithGoogle } = useAuth();
   const [form, setForm] = useState({ email: '', password: '' });
 
   const setFormInput = (e) => setForm({ ...form, [e.target.name]: e.target.value });
@@ -50,6 +51,15 @@ export default function Login() {
           >
             Masuk
           </PrimaryButton>
+          <button
+            className="mt-6 flex w-full items-center justify-center space-x-2 rounded-2xl py-2 shadow-low"
+            disabled={loading.login}
+            onClick={loginWithGoogle}
+            type="button"
+          >
+            <span className="text-body-14">Masuk dengan</span>
+            <GoogleIcon className="h-8 w-8" />
+          </button>
         </form>
         <div className="absolute bottom-6 left-0 flex w-full items-center justify-center space-x-2 lg:static lg:mt-10">
           <p className="text-body-14 text-[#151515] lg:text-[#000]">Belum punya akun?</p>

src/pages/Register.js

@@ -3,11 +3,12 @@ import { Link } from 'react-router-dom';
 import { BackButton, PrimaryButton } from '../components/buttons';
 import { LabelPasswordInput, LabelTextInput } from '../components/inputs';
 import { AuthLayout } from '../components/layouts';
+import { GoogleIcon } from '../components/icons';
 import useAuth from '../hooks/dependent/useAuth';
 import AuthenticationRoute from '../routes/AuthenticationRoute';
 
 export default function Register() {
-  const { register, loading } = useAuth();
+  const { register, loading, registerWithGoogle } = useAuth();
   const [form, setForm] = useState({ name: '', email: '', password: '' });
 
   const setFormInput = (e) => setForm({ ...form, [e.target.name]: e.target.value });
@@ -17,12 +18,7 @@ export default function Register() {
       <AuthLayout>
         <BackButton className="absolute top-[14px] left-4 lg:hidden" />
         <h1 className="text-heading-24 font-bold">Daftar</h1>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            register(form.name, form.email, form.password);
-          }}
-        >
+        <form onSubmit={(e) => e.preventDefault()}>
           <LabelTextInput
             autoFocus
             id="name"
@@ -55,10 +51,21 @@ export default function Register() {
             className="mt-6 w-full"
             data-testid="register-button"
             isDisable={loading.register}
+            onClick={() => register(form.name, form.email, form.password)}
             type="submit"
           >
             Daftar
           </PrimaryButton>
+
+          <button
+            className="mt-6 flex w-full items-center justify-center space-x-2 rounded-2xl py-2 shadow-low"
+            disabled={loading.register}
+            onClick={registerWithGoogle}
+            type="button"
+          >
+            <span className="text-body-14">Daftar dengan</span>
+            <GoogleIcon className="h-8 w-8" />
+          </button>
         </form>
         <div className="absolute bottom-6 left-0 flex w-full items-center justify-center space-x-2 lg:static lg:mt-10">
           <p className="text-body-14 text-[#151515] lg:text-[#000]">Sudah punya akun?</p>

src/services/firebase/auth.js

@@ -0,0 +1,10 @@
+import { signInWithPopup, GoogleAuthProvider, getAuth } from 'firebase/auth';
+import app from '.';
+
+export const getUserDataWithGoogle = () => {
+  return new Promise((resolve, reject) => {
+    signInWithPopup(getAuth(app), new GoogleAuthProvider())
+      .then((result) => resolve(result.user))
+      .catch((error) => reject(error.message));
+  });
+};

src/services/firebase/index.js

@@ -0,0 +1,27 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from 'firebase/app';
+import {
+  firebaseApiKey,
+  firebaseAuthDomain,
+  firebaseFirebaseAppId,
+  firebaseMessagingSenderId,
+  firebaseProjectId,
+  firebaseStorageBucket,
+} from '../../constants/environment';
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: firebaseApiKey,
+  authDomain: firebaseAuthDomain,
+  projectId: firebaseProjectId,
+  storageBucket: firebaseStorageBucket,
+  messagingSenderId: firebaseMessagingSenderId,
+  appId: firebaseFirebaseAppId,
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+export default app;