Fix Oauth login redirect and Fitbit token

RADAR-base · Oct 14, 2024 · 2a69e87 · 2a69e87
1 parent c364a4a
commit 2a69e87
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 19 deletions.
diff --git a/pages/fitbit.tsx b/pages/fitbit.tsx
@@ -30,6 +30,7 @@ const Fitbit: NextPage = () => {
   const { flow: flowId, return_to: returnTo } = router.query
   const [traits, setTraits] = useState<any>()
   const [projects, setProjects] = useState<any>([])
+  const [tokenHandled, setTokenHandled] = useState(false) // Flag to ensure token is handled once
 
   const handleNavigation = () => {
     return restSourceClient.redirectToAuthRequestLink()
@@ -39,23 +40,35 @@ const Fitbit: NextPage = () => {
     ory.toSession().then(({ data }) => {
       const traits = data?.identity?.traits
       setTraits(traits)
-      setProjects(traits.projects) //
+      setProjects(traits.projects)
     })
   }, [flowId, router, router.isReady, returnTo])
 
   useEffect(() => {
     const handleToken = async () => {
-      if (!router.isReady || !projects.length) return
+      if (!router.isReady || !projects.length || tokenHandled) return
+
+      const existingToken = localStorage.getItem("access_token")
+
+      if (existingToken) {
+        await restSourceClient.redirectToRestSourceAuthLink(
+          existingToken,
+          projects[0],
+        )
+        setTokenHandled(true)
+        return
+      }
 
       const token = await restSourceClient.getAccessTokenFromRedirect()
       if (token) {
         localStorage.setItem("access_token", token)
         await restSourceClient.redirectToRestSourceAuthLink(token, projects[0])
+        setTokenHandled(true)
       }
     }
 
     handleToken()
-  }, [router.isReady, projects])
+  }, [router.isReady, projects, tokenHandled])
 
   return (
     <>

diff --git a/pages/oauth2-login.tsx b/pages/oauth2-login.tsx
@@ -4,32 +4,53 @@ import Link from "next/link"
 import { useRouter } from "next/router"
 import { useEffect, useState } from "react"
 
-import ory from "../pkg/sdk"
 import { MarginCard } from "../pkg"
+import ory from "../pkg/sdk"
 
 const OAuth2Login = () => {
   const router = useRouter()
   const [challenge, setChallenge] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
   const [traits, setTraits] = useState<any>()
   const [projects, setProjects] = useState<any>([])
+  const [redirect, setRedirect] = useState<any>(null)
 
   const basePath = process.env.BASE_PATH || "/kratos-ui"
 
   useEffect(() => {
-    ory.toSession().then(({ data }) => {
-      const traits = data?.identity?.traits
-      setTraits(traits)
-      setProjects(traits.projects) //
-    })
-  }, [router, router.isReady])
+    const checkSession = async () => {
+      try {
+        const { data } = await ory.toSession()
+        const traits = data?.identity?.traits
+        setTraits(traits)
+        setProjects(traits.projects)
+
+        if (!traits || !traits.projects || traits.projects.length === 0) {
+          console.log(redirect)
+          const currentUrl = window.location.href // Get the current page URL for return_to
+          router.push(`/login?return_to=${redirect}`)
+          return
+        }
+      } catch (error) {
+        console.error("Error fetching session:", error)
+        // Handle session fetch error, possibly redirect to login
+        router.push("/login")
+      }
+    }
+
+    checkSession()
+  }, [router])
 
   useEffect(() => {
     // Get the login challenge from the query parameters
-    const { login_challenge } = router.query
+    const { login_challenge, redirect_to } = router.query
     if (login_challenge) {
       setChallenge(String(login_challenge))
     }
+    if (redirect_to) {
+      console.log(redirect_to)
+      setRedirect(redirect_to)
+    }
   }, [router.query])
 
   const handleLogin = async () => {
@@ -67,8 +88,8 @@ const OAuth2Login = () => {
           <title>OAuth2 Login</title>
         </Head>
         <MarginCard>
-        <h1>OAuth2 Login</h1>
-        <p>Waiting for login challenge...</p>
+          <h1>OAuth2 Login</h1>
+          <p>Waiting for login challenge...</p>
         </MarginCard>
       </div>
     )
@@ -80,12 +101,12 @@ const OAuth2Login = () => {
         <title>OAuth2 Login</title>
       </Head>
       <MarginCard>
-      <h1>OAuth2 Login</h1>
-      {error && <p style={{ color: "red" }}>{error}</p>}
-      <p>To continue, please log in.</p>
-      <button onClick={handleLogin}>Log In</button>
-      <br />
-      <Link href="/">Cancel</Link>
+        <h1>OAuth2 Login</h1>
+        {error && <p style={{ color: "red" }}>{error}</p>}
+        <p>To continue, please log in.</p>
+        <button onClick={handleLogin}>Log In</button>
+        <br />
+        <Link href="/">Cancel</Link>
       </MarginCard>
     </div>
   )