Merge pull request #341 from bounswe/frontend/feature/google-sign-in

Frontend/feature/google sign in

prediction-polls/frontend/src/Pages/Auth/Google/index.jsx

@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import googleLogin from '../../../api/requests/googleLogin';
+
+function GoogleLogin() {
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    const code = new URLSearchParams(location.search).get('code');
+      if (code) {
+        googleLogin(code).then(success => {
+          if (success) {
+            // Redirect to profile if login was successful
+            navigate('/profile');
+          } else {
+            // Redirect to a login error page or back to login
+            navigate('/auth/sign-in');
+          }
+        });
+    }
+  }, [location.search, navigate]);
+
+  return (
+    <div>
+      <h1>Redirecting..</h1>
+    </div>
+  );
+}
+
+export default GoogleLogin;

prediction-polls/frontend/src/Pages/Auth/SignIn/index.jsx

@@ -15,6 +15,9 @@ function SignIn() {
   const [password, setPassword] = React.useState("");
   const [message, setMessage] = React.useState("");
   const navigate = useNavigate();
+  const handleLogin = () => {
+    window.location.href = getGoogleOAuthURL();
+  };
 
   const handleSignIn = async (e) => {
     e.preventDefault();
@@ -27,7 +30,7 @@ function SignIn() {
           password: password
         })
       };
-      const response = await fetch(process.env.REACT_APP_BACKEND_LINK+'/login', requestOptions);
+      const response = await fetch(process.env.REACT_APP_BACKEND_LINK+'/auth/login', requestOptions);
       const data = await response.json();
 
     if (response.status === 201 && data.accessToken && data.refreshToken) {
@@ -51,9 +54,8 @@ function SignIn() {
         <Form className = {{...styles.formItemLayout,labelCol: { span: 24 }, wrapperCol: { span: 24 }}}>
           <Form.Item>
             <div>
-              <Button className={styles.formButtonStyle} onClick={() => window.location.href = getGoogleOAuthURL()}>
-                <GoogleLogo className={styles.googleLogoStyle} />
-
+              <Button style={formButtonStyle} onClick={handleLogin}>
+                <GoogleLogo style={googleLogoStyle} />
                 <span>Sign In with Google</span>
               </Button>
             </div>

prediction-polls/frontend/src/Routes/Router.jsx

@@ -12,6 +12,7 @@ import Profile from '../Pages/Profile';
 import Settings from '../Pages/Settings';
 import Vote from '../Pages/Vote';
 import PrivateRoute from '../Components/PrivateRoute';
+import GoogleLogin from '../Pages/Auth/Google'
 import EditProfile from '../Pages/EditProfile';
 
 function AppRouter() {
@@ -29,6 +30,9 @@ function AppRouter() {
         <Route path="/feed" element={
           <Feed />
         } />
+        <Route path="/googleAuth" element={
+          <GoogleLogin />
+        } />
         <Route path="/create" element={
           <PrivateRoute><Create /></PrivateRoute>
         } />

prediction-polls/frontend/src/api/requests/googleLogin.jsx

@@ -0,0 +1,22 @@
+const baseUrl = process.env.REACT_APP_BACKEND_LINK;
+async function googleLogin(code) {
+  try {
+    const response = await fetch(`${baseUrl}/auth/google`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ 'code': code })
+    });
+    const data = await response.json();
+    if (response.status === 200 && data.accessToken && data.refreshToken) {
+      localStorage.setItem('accessToken', data.accessToken); 
+      localStorage.setItem('refreshToken', data.refreshToken);
+      return { success: true };
+    } else {
+      return { success: false };
+    }
+  } catch (error) {
+    return false;
+  }
+}
+
+export default googleLogin;