MIM-582: property-tree: revise login flow (#79)

* wip

* no errors now when strict mode is off

* usequery for user

* some clean up + use typed callback request

* auth provider not needed

* tree: revise auth callback

* tree: move auth stuff

* tree: userUser -> useUser

* tree: track last known path for redirect on re-auth

Author: momentiris

packages/property-tree/src/App.tsx

@@ -7,12 +7,7 @@ import {
 import { CommandPalette } from './components/CommandPalette'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { CommandPaletteProvider } from './components/hooks/useCommandPalette'
-import {
-  AuthProvider,
-  ProtectedRoute,
-  useAuth,
-} from './components/auth/useAuth'
-import { AuthCallback } from './components/auth/AuthCallback'
+import { AuthCallback } from './auth/AuthCallback'
 
 import { CompanyView } from './components/views/CompanyView'
 import { PropertyView } from './components/views/PropertyView'
@@ -35,6 +30,9 @@ import {
   BreadcrumbItem,
   BreadcrumbLink,
 } from './components/ui/Breadcrumb'
+import { ProtectedRoute } from './auth/ProtectedRoute'
+import { useAuth } from './auth/useAuth'
+import { useUser } from './auth/useUser'
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -46,7 +44,8 @@ const queryClient = new QueryClient({
 })
 
 function AppContent() {
-  const { user, logout } = useAuth()
+  const { logout } = useAuth()
+  const userState = useUser()
 
   return (
     <div className="min-h-screen bg-[#fafafa] dark:bg-gray-900">
@@ -77,9 +76,9 @@ function AppContent() {
                   </BreadcrumbItem>
                 </BreadcrumbList>
               </Breadcrumb>
-              {user && (
+              {userState.tag === 'success' && (
                 <div className="flex items-center gap-4">
-                  <span className="text-sm">{user.name}</span>
+                  <span className="text-sm">{userState.user.name}</span>
                   <button
                     onClick={logout}
                     className="text-sm text-gray-500 hover:text-gray-700"
@@ -123,36 +122,23 @@ function AppContent() {
 }
 
 export default function App() {
-  const authConfig = {
-    keycloakUrl:
-      import.meta.env.VITE_KEYCLOAK_URL ||
-      'https://auth-test.mimer.nu/realms/onecore-test',
-    clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID || 'onecore-test',
-    apiUrl: import.meta.env.VITE_CORE_API_URL || 'http://localhost:5010',
-    redirectUri:
-      import.meta.env.VITE_KEYCLOAK_REDIRECT_URI ||
-      'http://localhost:3000/callback',
-  }
-
   return (
     <QueryClientProvider client={queryClient}>
-      <AuthProvider config={authConfig}>
+      <CommandPaletteProvider>
         <Router>
-          <CommandPaletteProvider>
-            <Routes>
-              <Route path="/callback" element={<AuthCallback />} />
-              <Route
-                path="/*"
-                element={
-                  <ProtectedRoute>
-                    <AppContent />
-                  </ProtectedRoute>
-                }
-              />
-            </Routes>
-          </CommandPaletteProvider>
+          <Routes>
+            <Route path="/callback" element={<AuthCallback />} />
+            <Route
+              path="/*"
+              element={
+                <ProtectedRoute>
+                  <AppContent />
+                </ProtectedRoute>
+              }
+            />
+          </Routes>
         </Router>
-      </AuthProvider>
+      </CommandPaletteProvider>
     </QueryClientProvider>
   )
 }

packages/property-tree/src/auth-config.ts

@@ -0,0 +1,10 @@
+export const authConfig = {
+  keycloakUrl:
+    import.meta.env.VITE_KEYCLOAK_URL ||
+    'https://auth-test.mimer.nu/realms/onecore-test',
+  clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID || 'onecore-test',
+  apiUrl: import.meta.env.VITE_CORE_API_URL || 'http://localhost:5010',
+  redirectUri:
+    import.meta.env.VITE_KEYCLOAK_REDIRECT_URI ||
+    'http://localhost:3000/callback',
+}

packages/property-tree/src/auth/AuthCallback.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { Navigate, useNavigate, useSearchParams } from 'react-router-dom'
+import { match, P } from 'ts-pattern'
+
+import { authConfig } from '@/auth-config'
+import { POST } from '@/services/api/core/base-api'
+
+type AuthCallbackState =
+  | { tag: 'loading' }
+  | { tag: 'success' }
+  | { tag: 'error'; error: string }
+
+export function AuthCallback() {
+  const navigate = useNavigate()
+  const [searchParams] = useSearchParams()
+  const [state, setState] = React.useState<AuthCallbackState>({
+    tag: 'loading',
+  })
+
+  const code = searchParams.get('code')
+
+  const lastKnownClientPath = match(searchParams.get('state'))
+    .with(P.string, decodeURIComponent)
+    .otherwise(() => '/')
+
+  const requested = React.useRef(false)
+
+  React.useEffect(() => {
+    if (!code) {
+      return setState({
+        tag: 'error',
+        error: 'Ingen autentiseringskod hittades i URL:en.',
+      })
+    } else {
+      if (!requested.current) {
+        // Prevent duplicate requests caused by <StrictMode/> in development ¯\_(ツ)_/¯
+        requested.current = true
+        POST('/auth/callback', {
+          credentials: 'include',
+          body: {
+            code,
+            redirectUri: authConfig.redirectUri,
+          },
+        })
+          .then(() => setState({ tag: 'success' }))
+          .catch((err) => {
+            console.error(err)
+            setState({
+              tag: 'error',
+              error: 'Ett fel uppstod vid autentisering.',
+            })
+          })
+      }
+    }
+  }, [code, navigate])
+
+  return match(state)
+    .with({ tag: 'loading' }, () => (
+      <div className="flex items-center justify-center h-screen">
+        Autentiserar...
+      </div>
+    ))
+    .with({ tag: 'error' }, (e) => (
+      <div className="flex flex-col items-center justify-center h-screen">
+        <div className="text-red-500 mb-4">{e.error}</div>
+        <button
+          onClick={() => (window.location.href = '/')}
+          className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        >
+          Gå tillbaka
+        </button>
+      </div>
+    ))
+    .with({ tag: 'success' }, () => (
+      <div className="flex items-center justify-center h-screen">
+        <Navigate to={lastKnownClientPath} />
+      </div>
+    ))
+    .exhaustive()
+}

packages/property-tree/src/auth/ProtectedRoute.tsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { match } from 'ts-pattern'
+
+import { useAuth } from './useAuth'
+import { useUser } from './useUser'
+
+export function ProtectedRoute({ children }: { children: React.ReactNode }) {
+  const { login } = useAuth()
+  const user = useUser()
+
+  React.useEffect(() => {
+    if (user.tag === 'error' && user.error === 'unauthenticated') {
+      login(location.pathname)
+    }
+  }, [login, user])
+
+  return match(user)
+    .with({ tag: 'loading' }, () => (
+      <div className="flex items-center justify-center h-screen">Laddar...</div>
+    ))
+    .with({ tag: 'error' }, (e) => (
+      <div className="flex items-center justify-center h-screen">
+        <div className="text-red-500">Okänt fel, kontakta support.</div>
+      </div>
+    ))
+    .with({ tag: 'success' }, () => <>{children}</>)
+    .exhaustive()
+}

packages/property-tree/src/auth/useAuth.tsx

@@ -0,0 +1,32 @@
+import { authConfig } from '@/auth-config'
+
+export function useAuth() {
+  const login = (currentClientPath?: string) => {
+    const authUrl = new URL(
+      `${authConfig.keycloakUrl}/protocol/openid-connect/auth`
+    )
+    authUrl.searchParams.append('client_id', authConfig.clientId)
+    authUrl.searchParams.append('redirect_uri', authConfig.redirectUri)
+    authUrl.searchParams.append('response_type', 'code')
+    authUrl.searchParams.append('scope', 'openid profile email')
+
+    if (currentClientPath) {
+      authUrl.searchParams.append(
+        'state',
+        encodeURIComponent(currentClientPath)
+      )
+    }
+
+    window.location.href = authUrl.toString()
+  }
+
+  const logout = () => {
+    const logoutUrl = new URL(`${authConfig.apiUrl}/auth/logout`)
+    window.location.href = logoutUrl.toString()
+  }
+
+  return {
+    login,
+    logout,
+  }
+}

packages/property-tree/src/auth/useUser.ts

@@ -0,0 +1,58 @@
+import { useQuery } from '@tanstack/react-query'
+import { match, P } from 'ts-pattern'
+
+import { authConfig } from '@/auth-config'
+
+export type User = {
+  id: string
+  name: string
+  email: string
+  roles: string[]
+}
+
+type UserState =
+  | { tag: 'loading' }
+  | { tag: 'error'; error: 'unauthenticated' | 'unknown' }
+  | { tag: 'success'; user: User }
+
+export function useUser() {
+  const q = useQuery<User, 'unauthenticated' | 'unknown'>({
+    queryKey: ['auth', 'user'],
+    retry: false,
+    refetchInterval: 5000,
+    queryFn: () =>
+      fetch(`${authConfig.apiUrl}/auth/profile`, {
+        credentials: 'include',
+      }).then((res) => {
+        if (!res.ok) {
+          if (res.status === 401) {
+            throw 'unauthenticated'
+          } else {
+            throw 'unknown'
+          }
+        }
+
+        return res.json()
+      }),
+  })
+
+  return match(q)
+    .returnType<UserState>()
+    .with({ isLoading: true }, () => ({ tag: 'loading' }))
+    .with(
+      { data: P.not(P.nullish), isLoading: false, isError: false },
+      (v) => ({
+        tag: 'success',
+        user: v.data,
+      })
+    )
+    .with({ error: 'unauthenticated', isLoading: false }, () => ({
+      tag: 'error',
+      error: 'unauthenticated',
+    }))
+    .with({ error: 'unknown', isLoading: false }, () => ({
+      tag: 'error',
+      error: 'unknown',
+    }))
+    .otherwise(() => ({ tag: 'loading' }))
+}