refactor: changing how tokens are stored

brazucas · Oct 7, 2023 · 837e20e · 837e20e
1 parent 58f9522
commit 837e20e
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 21 deletions.
diff --git a/src/components/LoginCallbackHandler.tsx b/src/components/LoginCallbackHandler.tsx
@@ -1,21 +1,22 @@
 import React, { useEffect } from "react";
 import { useAuthToken } from "../hooks/useAuthToken";
 import PropTypes from 'prop-types';
+import { useUser } from "../hooks/useUser";
+import type { OAuthToken, OAuthUserInfo } from "../types/oauth.types";
 
 type ComponentProps = {
-    token: {
-        access_token: string;
-        refresh_token: string;
-        id_token: string;
-        scope: string;
-        expires_in: number;
-        token_type: string;
+    auth: {
+        token: OAuthToken;
+        user: OAuthUserInfo;
     },
     state: string | null;
 }
 
-export const LoginCallbackHandler: React.FunctionComponent = ({ token, state }: ComponentProps) => {
+export const LoginCallbackHandler: React.FunctionComponent = ({ auth, state }: ComponentProps) => {
     const { setAuthToken, setRefreshToken, setAuthTokenExpiresIn, setAuthTokenType } = useAuthToken();
+    const { storeUserInfo } = useUser();
+
+    const { token, user } = auth;
 
     useEffect(() => {
         const date = new Date();
@@ -24,13 +25,14 @@ export const LoginCallbackHandler: React.FunctionComponent = ({ token, state }:
         setRefreshToken(token.refresh_token);
         setAuthTokenExpiresIn(date.setTime(date.getTime() + (token.expires_in * 1000)).toString());
         setAuthTokenType(token.token_type);
+        storeUserInfo(user);
 
         if (state) {
             window.location.href = atob(state);
         } else {
             window.location.href = '/';
         }
-    }, [])
+    }, []);
 
     return (
         <></>

diff --git a/src/components/LogoutCallbackHandler.tsx b/src/components/LogoutCallbackHandler.tsx
@@ -1,11 +1,14 @@
 import React, { useEffect } from "react";
 import { useAuthToken } from "../hooks/useAuthToken";
+import { useUser } from "../hooks/useUser";
 
 export const LogoutCallbackHandler = () => {
     const { removeAuthTokens } = useAuthToken();
+    const { removeUserInfo } = useUser();
 
     useEffect(() => {
         removeAuthTokens();
+        removeUserInfo();
 
         window.location.href = '/';
     }, [])

diff --git a/src/hooks/useUser.tsx b/src/hooks/useUser.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from "react";
 import { useAuthToken } from "./useAuthToken";
+import { useCookies } from "react-cookie";
+import type { OAuthUserInfo } from "../types/oauth.types";
 
 type UserInfo = {
     nickname: string;
@@ -10,29 +12,29 @@ type UserInfo = {
 }
 
 export const useUser = () => {
+    const [cookies, setCookie, removeCookie] = useCookies(['userInfo']);
+
     const { authToken, authTokenExpiresIn } = useAuthToken();
     const [ isUserAuthenticated, setIsAuthenticated ] = useState(false);
     const [ userInfo, setUserInfo ] = useState<UserInfo | null>(null);
 
+    const storeUserInfo = (userInfo: OAuthUserInfo) => setCookie('userInfo', userInfo);
+    const removeUserInfo = () => removeCookie('userInfo');
+
     useEffect(() => {
         const isTokenExpired = new Date() > new Date(authTokenExpiresIn);
         setIsAuthenticated(authToken && !isTokenExpired);
     }, [authToken, authTokenExpiresIn]);
 
     useEffect(() => {
-        if(isUserAuthenticated) {
-            fetch(`https://${import.meta.env.PUBLIC_AUTH0_DOMAIN}/userinfo`, {
-                headers: {
-                    Authorization: `Bearer ${authToken}`
-                }
-                })
-                .then(response => response.json())
-                .then(data => setUserInfo(data)
-            );
+        const { userInfo } = cookies;
+
+        if (userInfo) {
+            setUserInfo(userInfo);
         }
-    }, [isUserAuthenticated]);
+    }, [cookies]);
 
     return {
-        isUserAuthenticated, userInfo
+        isUserAuthenticated, userInfo, storeUserInfo, removeUserInfo,
     };
 };
diff --git a/src/pages/login_callback.astro b/src/pages/login_callback.astro
@@ -20,6 +20,10 @@ const authenticateRequest = await fetch(`${Astro.url.protocol}//${Astro.url.host
   })
 });
 
+if (authenticateRequest.status !== 200) {
+  return Astro.redirect("/");
+}
+
 const authenticate = await authenticateRequest.json();
 ---
 <Layout title="Authentication">
@@ -36,4 +40,4 @@ const authenticate = await authenticateRequest.json();
   </main>
 </Layout>
 
-<LoginCallbackHandler client:load token={authenticate} state={state}></LoginCallbackHandler>
+<LoginCallbackHandler client:load auth={authenticate} state={state}></LoginCallbackHandler>