Merge pull request #10 from brazucas/feat/simplify-authentication

feat: simplify authentication code

src/common/oauth-client.ts

@@ -0,0 +1,57 @@
+import type { OAuthToken, OAuthUserInfo } from "./types/oauth.types";
+
+export class OAuthClient {
+  private domain: string;
+  private clientId: string;
+  private clientSecret: string;
+  private redirectUri: string;
+
+  constructor(
+    domain: string,
+    clientId: string,
+    clientSecret: string,
+    redirectUri: string
+  ) {
+    this.domain = domain;
+    this.clientId = clientId;
+    this.clientSecret = clientSecret;
+    this.redirectUri = redirectUri;
+  }
+
+  getUserInfo = async (accessToken: string): Promise<OAuthUserInfo> => {
+    const request = await fetch(`https://${this.domain}/userinfo`, {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    if (request.status !== 200) {
+      throw new Error("Error fetching auth token");
+    }
+
+    return await request.json();
+  };
+
+  getTokenInfo = async (code: string): Promise<OAuthToken> => {
+    const formData = new URLSearchParams();
+    formData.append("grant_type", "authorization_code");
+    formData.append("client_id", this.clientId);
+    formData.append("client_secret", this.clientSecret);
+    formData.append("code", code);
+    formData.append("redirect_uri", this.redirectUri);
+
+    const request = await fetch(`https://${this.domain}/oauth/token`, {
+      method: "POST",
+      body: formData,
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+    });
+
+    if (request.status !== 200) {
+      throw new Error("Error fetching auth token");
+    }
+
+    return await request.json();
+  };
+}

src/common/oauth/providers/auth0-client.ts

@@ -0,0 +1,12 @@
+import { OAuthClient } from "../../oauth-client";
+
+export class Auth0Client extends OAuthClient {
+  constructor() {
+    super(
+      import.meta.env.PUBLIC_AUTH0_DOMAIN,
+      import.meta.env.PUBLIC_AUTH0_CLIENT_ID,
+      import.meta.env.AUTH0_SECRET,
+      import.meta.env.PUBLIC_AUTH0_LOGOUT_URI
+    );
+  }
+}

src/hooks/useAuthToken.tsx

@@ -2,33 +2,21 @@ import { useEffect, useState } from "react";
 import { useCookies } from "react-cookie";
 
 export const useAuthToken = () => {
-    const [cookies, setCookie, removeCookie] = useCookies(['authToken', 'authTokenExpiresIn', 'authTokenType', 'refreshToken']);
-    const [authToken, updateAuthToken] = useState(null);
-    const [refreshToken, updateRefreshToken] = useState(null);
-    const [authTokenExpiresIn, updateAuthTokenExpiresIn] = useState(null);
-    const [authTokenType, updateTokenType] = useState(null);
+    const [cookies] = useCookies(['authToken', 'authTokenExpiresIn', 'authTokenType', 'refreshToken']);
+    const [authToken, setAuthToken] = useState(null);
+    const [refreshToken, setRefreshToken] = useState(null);
+    const [authTokenExpiresIn, setAuthTokenExpiresIn] = useState(null);
+    const [authTokenType, setTokenType] = useState(null);
 
-    const setAuthToken = (token: string) => setCookie('authToken', token);
-    const setRefreshToken = (type: string) => setCookie('refreshToken', type);
-    const setAuthTokenExpiresIn = (expiresIn: string) => setCookie('authTokenExpiresIn', expiresIn);
-    const setAuthTokenType = (type: string) => setCookie('authTokenType', type);
-
-    const removeAuthTokens = () => {
-        removeCookie('authToken', {path:'/'});
-        removeCookie('authTokenExpiresIn', {path:'/'});
-        removeCookie('authTokenType', {path:'/'});
-        removeCookie('refreshToken', {path:'/'});
-    };
-
     useEffect(() => {
         const { authToken, authTokenExpiresIn, authTokenType, refreshToken } = cookies;
-        updateAuthToken(authToken);
-        updateRefreshToken(refreshToken);
-        updateAuthTokenExpiresIn(authTokenExpiresIn);
-        updateTokenType(authTokenType);
+        setAuthToken(authToken);
+        setRefreshToken(refreshToken);
+        setAuthTokenExpiresIn(authTokenExpiresIn);
+        setTokenType(authTokenType);
     }, [cookies]);
 
     return {
-        authToken, setAuthToken, authTokenExpiresIn, setAuthTokenExpiresIn, authTokenType, setAuthTokenType, removeAuthTokens, refreshToken, setRefreshToken
+        authToken, authTokenExpiresIn, authTokenType, refreshToken
     };
 };

src/hooks/useUser.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useAuthToken } from "./useAuthToken";
 import { useCookies } from "react-cookie";
-import type { OAuthUserInfo } from "../types/oauth.types";
+import type { OAuthUserInfo } from "../common/types/oauth.types";
 
 type UserInfo = {
     nickname: string;
@@ -12,17 +12,17 @@ type UserInfo = {
 }
 
 export const useUser = () => {
-    const [cookies, setCookie, removeCookie] = useCookies(['userInfo']);
+    const [cookies, setCookie] = 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]);
 
@@ -35,6 +35,6 @@ export const useUser = () => {
     }, [cookies]);
 
     return {
-        isUserAuthenticated, userInfo, storeUserInfo, removeUserInfo,
+        isUserAuthenticated, userInfo, storeUserInfo,
     };
 };