Merge pull request #515 from sparcs-kaist/google

Feat/ Google Login

packages/api/package.json

@@ -26,6 +26,7 @@
     "@socket.io/component-emitter": "^3.1.0",
     "cors": "^2.8.5",
     "express": "^4.18.2",
+    "google-auth-library": "^9.15.0",
     "jsonwebtoken": "^9.0.0",
     "ldapts": "^4.2.6",
     "prisma": "^4.16.2",

packages/api/src/auth/google.ts

@@ -0,0 +1,25 @@
+import { z } from "zod";
+import { OAuth2Client } from "google-auth-library";
+import { env } from "@biseo/api/env";
+import jwt from "jsonwebtoken";
+
+const Token = z.object({
+  email: z.string(),
+});
+
+export const gauthenticate = async (code: string): Promise<string | null> => {
+  try {
+    const logininfo = new OAuth2Client(
+      env.GOOGLE_CLIENT,
+      env.GOOGLE_SECRET,
+      "postmessage",
+    );
+    const token = await logininfo.getToken(code);
+    const mail = Token.parse(jwt.decode(token.tokens.id_token!)).email;
+    const username =
+      mail.split("@")[1] === "sparcs.org" ? mail.split("@")[0] : null;
+    return username;
+  } catch {
+    return null;
+  }
+};

packages/api/src/auth/login.ts

@@ -4,6 +4,7 @@ import type { Request, Response } from "express";
 import { prisma } from "@biseo/api/db/prisma";
 
 import { authenticate } from "./ldap";
+import { gauthenticate } from "./google";
 import { getToken } from "./token";
 
 const Login = z.object({
@@ -25,3 +26,16 @@ export const loginHandler = async (req: Request, res: Response) => {
 
   return res.json({ token: getToken(user.username) });
 };
+
+export const gLoginHandler = async (req: Request, res: Response) => {
+  const result = req.body;
+
+  const username = await gauthenticate(result.code);
+  if (!username) return res.status(401).send("Unauthorized");
+
+  const user =
+    (await prisma.user.findUnique({ where: { username } })) ||
+    (await prisma.user.create({ data: { username, displayName: username } }));
+
+  return res.json({ token: getToken(user.username) });
+};

packages/api/src/auth/router.ts

@@ -1,10 +1,13 @@
 import { Router } from "express";
-import { loginHandler } from "./login";
+import { loginHandler, gLoginHandler } from "./login";
 
 const router = Router();
 
 router.post("/login", (req, res, next) => {
   loginHandler(req, res).catch(next);
 });
+router.post("/glogin", (req, res, next) => {
+  gLoginHandler(req, res).catch(next);
+});
 
 export { router as authRouter };

packages/api/src/env.ts

@@ -4,6 +4,8 @@ const schema = z.object({
   NODE_ENV: z.enum(["development", "production", "test"]),
   SERVER_PORT: z.coerce.number(),
   SECRET_KEY: z.string(),
+  GOOGLE_CLIENT: z.string(),
+  GOOGLE_SECRET: z.string(),
 });
 
 export const env = schema.parse(process.env);

packages/web/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@react-oauth/google": "^0.12.1",
     "axios": "^1.4.0",
     "framer-motion": "^10.16.1",
     "immer": "^10.0.2",

packages/web/src/common/api/auth.ts

@@ -15,3 +15,17 @@ export const getToken = async (username: string, password: string) => {
     return null;
   }
 };
+
+export const getGoogleToken = async (code: string) => {
+  try {
+    const res = await axios.post<{ token: string }>(
+      `${API_BASE}/api/auth/glogin`,
+      {
+        code,
+      },
+    );
+    return res.data.token;
+  } catch {
+    return null;
+  }
+};

packages/web/src/components/pages/LoginPage.tsx

@@ -5,12 +5,14 @@ import { motion } from "framer-motion";
 
 import { LogoLargeIcon } from "@biseo/web/assets";
 import LandingImg from "@biseo/web/assets/landing.png";
+import GoogleLogo from "@biseo/web/assets/google.png";
 import { useAuth } from "@biseo/web/services/auth";
 
 import { useInput } from "@biseo/web/common/hooks";
 import { theme } from "@biseo/web/theme";
 import { Box, Text } from "@biseo/web/components/atoms";
 import { text } from "@biseo/web/styles";
+import { useGoogleLogin } from "@react-oauth/google";
 
 const Page = styled.div`
   width: 100vw;
@@ -63,7 +65,7 @@ const InputContainer = styled.input`
 
 const LoginButton = styled.button`
   width: 320px;
-  height: 45px;
+  height: 48px;
 
   background-color: ${theme.colors.blue200};
   border: none;
@@ -78,6 +80,7 @@ const LoginButton = styled.button`
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  gap: 6px;
 
   cursor: pointer;
   transition: all 0.2s;
@@ -86,6 +89,9 @@ const LoginButton = styled.button`
 const LoginBackground = styled.img`
   width: 100%;
   max-width: 1700px;
+  height: 30%;
+
+  object-fit: cover;
 
   position: absolute;
   opacity: 30%;
@@ -95,8 +101,9 @@ const LoginBackground = styled.img`
 `;
 
 export const LoginPage: React.FC = () => {
-  const { login, isLoggedIn } = useAuth(state => ({
+  const { login, glogin, isLoggedIn } = useAuth(state => ({
     login: state.login,
+    glogin: state.glogin,
     isLoggedIn: !!state.userInfo,
   }));
   const [error, setError] = useState<boolean>(false);
@@ -124,6 +131,21 @@ export const LoginPage: React.FC = () => {
     },
     [username.value, password.value],
   );
+  const handleGLogin = useCallback((code: string) => {
+    glogin(code)
+      .then(() => console.log("Login success!"))
+      .catch(() => setError(true));
+  }, []);
+  const googleLogin = useGoogleLogin({
+    scope: "email",
+    onSuccess: async ({ code }) => {
+      handleGLogin(code);
+    },
+    onError: errorResponse => {
+      console.error(errorResponse);
+    },
+    flow: "auth-code",
+  });
 
   if (isLoggedIn) return <Navigate to="/" replace />;
 
@@ -139,7 +161,6 @@ export const LoginPage: React.FC = () => {
           쉽고 빠른 의사결정은, Biseo
         </LoginTitle>
       </Box>
-
       <form onSubmit={handleLogin}>
         <Box dir="column" gap={12} align="center">
           <InputContainer
@@ -162,13 +183,19 @@ export const LoginPage: React.FC = () => {
             )}
 
             <LoginButton>
-              <Text variant="body" color="blue600">
+              <Text variant="boldtitle2" color="blue600">
                 로그인
               </Text>
             </LoginButton>
           </Box>
         </Box>
       </form>
+      <LoginButton onClick={googleLogin}>
+        <img alt="google-logo" style={{ width: "20px" }} src={GoogleLogo} />
+        <Text variant="boldtitle2" color="blue600">
+          구글 로그인
+        </Text>
+      </LoginButton>
       <LoginBackground src={LandingImg} />
     </Page>
   );

packages/web/src/main.tsx

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import { ThemeProvider } from "@emotion/react";
 import { enableMapSet } from "immer";
+import { GoogleOAuthProvider } from "@react-oauth/google";
 
 import router from "@biseo/web/router";
 import { theme } from "@biseo/web/theme";
@@ -12,9 +13,11 @@ import "./index.css";
 enableMapSet();
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <RouterProvider router={router} />
-    </ThemeProvider>
-  </React.StrictMode>,
+  <GoogleOAuthProvider clientId="630761439137-ouv559b1su1h52t0jqau3g41ok2cf3p0.apps.googleusercontent.com">
+    <React.StrictMode>
+      <ThemeProvider theme={theme}>
+        <RouterProvider router={router} />
+      </ThemeProvider>
+    </React.StrictMode>
+  </GoogleOAuthProvider>,
 );

packages/web/src/services/auth.ts

@@ -5,13 +5,14 @@ import type { Init } from "@biseo/interface/init";
 
 import { socket } from "@biseo/web/socket";
 import { initSocket } from "@biseo/web/socket/init";
-import { getToken } from "@biseo/web/common/api/auth";
+import { getToken, getGoogleToken } from "@biseo/web/common/api/auth";
 
 interface AuthState {
   token: string | null;
   userInfo: Init | null;
   init: () => Promise<Init | null>;
   login: (username: string, password: string) => Promise<void>;
+  glogin: (code: string) => Promise<void>;
   logout: () => void;
 }
 
@@ -42,6 +43,14 @@ const useAuth = create<AuthState>()(
         const userInfo = await initSocket(token);
         set({ token, userInfo });
       },
+      glogin: async code => {
+        const token = await getGoogleToken(code);
+
+        if (!token) throw new Error("incorrect username");
+
+        const userInfo = await initSocket(token);
+        set({ token, userInfo });
+      },
       logout: () => {
         set({ token: null, userInfo: null });
         socket.disconnect();