Support login with Google

package.json

@@ -7,6 +7,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@hookform/error-message": "^2.0.1",
+    "@react-oauth/google": "^0.12.1",
     "@reduxjs/toolkit": "^1.8.0",
     "@types/lodash": "^4.14.182",
     "@types/react-datepicker": "^4.4.1",

src/apiClient/auth.ts

@@ -21,6 +21,12 @@ async function logIn(query: LogInQuery): Promise<User | APIErrorType> {
   return request("/auth/#/", "POST", query);
 }
 
+async function signInWithGoogle(query: {
+  token: string;
+}): Promise<User | APIErrorType> {
+  return request("/auth/#/google/", "POST", query);
+}
+
 async function checkResetPasswordToken(query: {
   email: string;
   token: string;
@@ -60,5 +66,6 @@ export const authClient = {
   loggedIn,
   logIn,
   logOut,
+  signInWithGoogle,
   changePassword,
 };

src/components/Buttons.tsx

@@ -4,7 +4,7 @@ type Props = React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export function SquareButton(props: Props) {
   const { className, ...otherProps } = props;
-  const btnClassName = "btn btn-outline-secondary " + className ?? "";
+  const btnClassName = "btn btn-outline-secondary " + (className ?? "");
   return <StyledButton className={btnClassName} {...otherProps} />;
 }
 

src/lib/constants.ts

@@ -1,2 +1,4 @@
 export const restrictedGearDoc =
   "https://docs.google.com/spreadsheets/d/1CW3j4K4_HmXlDbO1vPRvIW76SI41EYNbaZKKrqmrgTk/edit?hl=en&hl=en#gid=88766958";
+export const googleOauthClientId =
+  "684714029056-ch47siehvc4u7id38lmukvp9ihkc7hr6.apps.googleusercontent.com";

src/pages/#/#Form.tsx

@@ -5,6 +5,7 @@ import { Link } from "react-router-dom";
 import { validateEmail } from "lib/validation";
 import { logIn } from "redux/auth/authSlice";
 import { useAppDispatch } from "redux/hooks";
+import { SignInWithGoogle } from "./SignInWithGoogle";
 
 export function LoginForm() {
   const dispatch = useAppDispatch();
@@ -34,12 +35,15 @@ export function LoginForm() {
   return (
     <div className="row">
       <div className="col-md-6">
+        <SignInWithGoogle />
+        <hr />
         <form>
           <label className="w-100 mb-2">
             Email:
             <input
               className={`form-control ${emailError ? "is-invalid" : ""}`}
               required
+              autoComplete="email"
               type="email"
               value={email}
               onChange={(evt) => {
@@ -54,6 +58,7 @@ export function LoginForm() {
             <input
               type="password"
               required
+              autoComplete="current-password"
               className={`form-control ${passwordError ? "is-invalid" : ""}`}
               value={password}
               onChange={(evt) => {

src/pages/#/SignInWithGoogle.tsx

@@ -0,0 +1,25 @@
+import { GoogleLogin, GoogleOAuthProvider } from "@react-oauth/google";
+
+import { googleOauthClientId } from "lib/constants";
+import { signInWithGoogle } from "redux/auth";
+import { useAppDispatch } from "redux/hooks";
+
+export function SignInWithGoogle() {
+  const dispatch = useAppDispatch();
+
+  return (
+    <GoogleOAuthProvider clientId={googleOauthClientId}>
+      <GoogleLogin
+        onSuccess={(response) => {
+          const token = response.credential;
+          if (!token) {
+            console.error("No Google token.");
+            return;
+          }
+          dispatch(signInWithGoogle({ token }));
+        }}
+        onError={() => console.error("Signin with google failed.")}
+      />
+    </GoogleOAuthProvider>
+  );
+}

src/redux/auth/authSlice.ts

@@ -20,6 +20,10 @@ export const checkLoggedIn = createCustomAsyncThunk(
 );
 
 export const logIn = createCustomAsyncThunk("auth/#", authClient.logIn);
+export const signInWithGoogle = createCustomAsyncThunk(
+  "auth/signInWithGoogle",
+  authClient.signInWithGoogle,
+);
 export const logOut = createAsyncThunk("auth/logOut", authClient.logOut);
 
 const authSlice = createSlice({
@@ -70,6 +74,19 @@ const authSlice = createSlice({
         state.loadingStatus = "idle";
         state.error = action.payload as APIErrorType;
       })
+      .addCase(signInWithGoogle.pending, (state) => {
+        state.loadingStatus = "loading";
+      })
+      .addCase(signInWithGoogle.fulfilled, (state, action) => {
+        state.loadingStatus = "idle";
+        state.loggedIn = true;
+        state.user = action.payload as User;
+        delete state.error;
+      })
+      .addCase(signInWithGoogle.rejected, (state, action) => {
+        state.loadingStatus = "idle";
+        state.error = action.payload as APIErrorType;
+      })
       .addCase(logOut.pending, (state) => {
         state.loadingStatus = "loading";
       })

yarn.lock

@@ -1671,6 +1671,11 @@
   dependencies:
     "@swc/helpers" "^0.4.14"
 
+"@react-oauth/google@^0.12.1":
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/@react-oauth/google/-/google-0.12.1.tgz#b76432c3a525e9afe076f787d2ded003fcc1bee9"
+  integrity sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==
+
 "@reduxjs/toolkit@^1.8.0":
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.1.tgz#94ee1981b8cf9227cda40163a04704a9544c9a9f"