docs: 🐛 fix user auth issue + refacto api calls

Signed-off-by: slumbering <slumbering.pierrot@gmail.com>

website/src/api/github.js

@@ -4,55 +4,65 @@ const AxiosInstance = axios.create({
     headers: { 'Accept': 'application/vnd.github.v3+json' },
 });
 
-async function getAccessToken(code) {
+function bindApiCall({ url, config, errorMessage }) {
-
     try {
-        const getAccessToken = await AxiosInstance.get('https://github.com/login/oauth/access_token', {
+        const apiCall = AxiosInstance.get(url, {
+            ...config,
+            validateStatus: function (status) {
+                return status < 500; // Resolve only if the status code is less than 500
+            }
+        })
+
+        return apiCall
+    } catch (error) {
+        console.log(errorMessage, error.message)
+    }
+}
+
+async function getAccessToken(code) {
+    const accessToken = await bindApiCall({
+        url: 'https://github.com/login/oauth/access_token',
+        config: {
             params: {
                 code,
                 client_id: 'cd8f9be2562bfc8d6cfc',
                 client_secret: '2509358055095d52dfd7331d072f378e7f16940f',
             },
-            validateStatus: function (status) {
+            errorMessage: 'error getAccessToken'
-                return status < 500; // Resolve only if the status code is less than 500
+        }
-            }
+    })
-        })
 
-        return getAccessToken.data;
+    return accessToken.data
-    } catch (error) {
-        console.log("error getAccessToken", error.message)
-    }
 }
 
 export async function getUser(access_token) {
-    try {
+    const user = await bindApiCall({
-        const getUserLogin = await AxiosInstance.get("https://api.github.com/user", {
+        url: 'https://api.github.com/user',
+        config: {
             headers: { Authorization: `token ${access_token}` },
-            validateStatus: function (status) {
+        },
-                return status < 500; // Resolve only if the status code is less than 500
+        errorMessage: 'error getUser'
-            }
+    })
-        })
 
-        return {
+    return {
-            login: getUserLogin.data.login,
+        login: user.data?.login,
-            status: getUserLogin.status
+        error: user.data?.error_description,
-        }
+        status: user.status
-    } catch (error) {
-        console.log("error getUser", error.message)
     }
+
 }
 
 export async function checkUserCollaboratorStatus(code) {
     const { access_token } = await getAccessToken(code)
     const { login } = await getUser(access_token)
-    try {
-        const isUserCollaborator = await AxiosInstance.get(`https://docs-access.dagger.io/u/${login}`)
 
-        return {
+    const isUserCollaborator = await bindApiCall({
-            status: isUserCollaborator.status,
+        url: `https://docs-access.dagger.io/u/${login}`,
-            access_token
+        errorMessage: 'error checkUserCollaboratorStatus'
-        }
+    })
-    } catch (error) {
+
-        console.log("error checkUserCollaboratorStatus", error.message);
+    return {
+        isAllowed: isUserCollaborator.data,
+        access_token
     }
 }

website/src/components/DocPageAuthentication.js

@@ -6,7 +6,7 @@ export default function DocAuthentication() {
     return (
         <div className={style.container}>
             <h1 className={style.h1}>Welcome on Dagger documentation</h1>
-            <p>Please Sign in to Github in order to get access to the doc</p>
+            <p>Please Sign In to Github to get access to the doc</p>
             <GithubLoginButton className={style.btn__github} onClick={() => window.location.href = `//github.com/login/oauth/authorize?client_id=cd8f9be2562bfc8d6cfc&scope=user&allow_signup=false`} />
         </div>
     )

website/src/theme/DocPage/index.js

@@ -153,14 +153,14 @@ function DocPage(props) {
         const user = await getUser(userAccessToken)
         setIsUserAuthorized(user)
       } else {
-        if (!isEmpty(authQuery)) { //callback after successful auth with github)
+        if (!isEmpty(authQuery)) { //callback after successful auth with github
           const isUserCollaborator = await checkUserCollaboratorStatus(authQuery.code);
-          if (isUserCollaborator?.status === 200) {
+          if (isUserCollaborator?.isAllowed) {
             setUserAccessToken(isUserCollaborator.access_token)
             if (typeof window !== "undefined") window.localStorage.setItem('user-github-key', isUserCollaborator.access_token);
-          } else {
-            setIsUserAuthorized({ status: 401 })
           }
+
+          setIsUserAuthorized(isUserCollaborator?.isAllowed)
         }
       }
       setIsLoading(false)
@@ -169,11 +169,11 @@ function DocPage(props) {
 
     if (isLoading) return <Spinner />
 
-    if ((isUserAuthorized?.status && isUserAuthorized?.status === 401)) {
+    if (isUserAuthorized === false) {
       return <DocPageRedirect />
     }
 
-    if (!isUserAuthorized) {
+    if (typeof isUserAuthorized == 'undefined' || isUserAuthorized?.status === 401) {
       return (
         <DocPageAuthentication />
       )