feat: add customer authentication (#1205)

* feat: draft for auth service

* feat: draft for requests

* fix: update identity management

* feat: update redirect urls

* feat: restructure route protection and environment variable loading

* fix: fix lint

* fix: fix 404 building without error

---------

Co-authored-by: Felix Evers <[email protected]>

Author: DasProffi

customer/.env.development

@@ -1,3 +1,5 @@
-NEXT_PUBLIC_API_URL=https://staging.api.helpwave.de
-NEXT_PUBLIC_OAUTH_REDIRECT_URI=http://localhost:3000/auth/callback
-NEXT_PUBLIC_FAKE_TOKEN_ENABLE=true
+NEXT_PUBLIC_API_URL=https://localhost:8000
+NEXT_PUBLIC_OIDC_PROVIDER=http://localhost:8080/realms/myrealm
+NEXT_PUBLIC_CLIENT_ID=myclient
+NEXT_PUBLIC_REDIRECT_URI=http://localhost:3000/auth/callback
+NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI=http://localhost:3000/

customer/.env.production

@@ -1,4 +1,5 @@
-NODE_ENV=production
-NEXT_PUBLIC_API_URL=https://staging.api.helpwave.de
-NEXT_PUBLIC_OAUTH_REDIRECT_URI=https://staging-tasks.helpwave.de/auth/callback
-NEXT_PUBLIC_FAKE_TOKEN_ENABLE=true
+NEXT_PUBLIC_API_URL=https://customer.api.helpwave.de
+NEXT_PUBLIC_OIDC_PROVIDER=https://id.helpwave.de/realms/main/
+NEXT_PUBLIC_CLIENT_ID=customer-api
+NEXT_PUBLIC_REDIRECT_URI=https://customer.helpwave.de
+NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI=https://customer.helpwave.de/

customer/api/auth/authService.ts

@@ -0,0 +1,64 @@
+'use client'
+
+import { CLIENT_ID, OIDC_PROVIDER, POST_LOGOUT_REDIRECT_URI, REDIRECT_URI } from '@/api/auth/config'
+import type { User } from 'oidc-client-ts'
+import { UserManager } from 'oidc-client-ts'
+
+const userManager = new UserManager({
+  authority: OIDC_PROVIDER,
+  client_id: CLIENT_ID,
+  redirect_uri: REDIRECT_URI,
+  response_type: 'code',
+  scope: 'openid profile email',
+  post_logout_redirect_uri: POST_LOGOUT_REDIRECT_URI,
+  // userStore: userStore, // TODO Consider persisting user data across sessions
+})
+
+export const signUp = () => {
+  return userManager.signinRedirect()
+}
+
+export const login = (redirectURI?: string) => {
+  return userManager.signinRedirect({ redirect_uri: redirectURI })
+}
+
+export const handleCallback = async () => {
+  return await userManager.signinRedirectCallback()
+}
+
+export const logout = () => {
+  return userManager.signoutRedirect()
+}
+
+export const getUser = async (): Promise<User | null> => {
+  return await userManager.getUser()
+}
+
+export const renewToken = async () => {
+  return await userManager.signinSilent()
+}
+
+export const restoreSession = async (): Promise<User | undefined> => {
+  if (typeof window === 'undefined') return // Prevent SSR access
+  const user = await userManager.getUser()
+  if (!user) return
+
+  // If access token is expired, refresh it
+  if (user.expired) {
+    try {
+      console.log('Access token expired, refreshing...')
+      const refreshedUser = await renewToken()
+      return refreshedUser ?? undefined
+    } catch (error) {
+      console.error('Silent token renewal failed', error)
+      return
+    }
+  }
+
+  return user
+}
+
+userManager.events.addAccessTokenExpiring(async () => {
+  console.log('Token expiring, refreshing...')
+  await renewToken()
+})

customer/api/auth/config.ts

@@ -0,0 +1,4 @@
+export const OIDC_PROVIDER = process.env.NEXT_PUBLIC_OIDC_PROVIDER
+export const CLIENT_ID = process.env.NEXT_PUBLIC_CLIENT_ID
+export const REDIRECT_URI = process.env.NEXT_PUBLIC_REDIRECT_URI
+export const POST_LOGOUT_REDIRECT_URI = process.env.NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI

customer/api/mutations/customer_mutations.ts

@@ -2,6 +2,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { QueryKeys } from '@/api/mutations/query_keys'
 import type { Customer } from '@/api/dataclasses/customer'
 import { CustomerAPI } from '@/api/services/customer'
+import { useAuth } from '@/hooks/useAuth'
+import { apiURL } from '@/config'
 
 
 
@@ -16,8 +18,28 @@ export const useCustomerMyselfQuery = () => {
 
 export const useCustomerCreateMutation = () => {
   const queryClient = useQueryClient()
+  const { authHeader } = useAuth()
   return useMutation({
     mutationFn: async (customer: Customer) => {
+     const data = await fetch(`${apiURL}/customer`, {
+       method: 'PUT',
+       mode: 'no-cors',
+       headers: { ...authHeader },
+      body: JSON.stringify({
+        name: customer.name,
+        email: customer.email,
+        website_url: customer.websiteURL,
+        address: customer.address.street,
+        house_number: customer.address.houseNumber,
+        care_of: customer.address.houseNumberAdditional,
+        postal_code: customer.address.postalCode,
+        city: customer.address.city,
+        country: customer.address.country,
+      })
+     })
+      const json = await data.json()
+      console.log(json)
+      // TODO parse json as customer
       return await CustomerAPI.create(customer)
     },
     onSuccess: () => {

customer/components/layout/NavigationSidebar.tsx

@@ -87,7 +87,7 @@ export const NavigationSidebar = ({ items, className }: NavSidebarProps) => {
         <div className={tw('flex flex-col p-4 gap-y-4 bg-gray-50')}>
           <div className={tw('flex flex-row gap-x-2 items-center')}>
             <Avatar avatarUrl="https://helpwave.de/favicon.ico" alt="" size="small"/>
-            {identity?.name}
+            {identity?.profile?.name}
           </div>
           <Button onClick={logout} color="hw-negative">{translation.logout}</Button>
         </div>

customer/components/pages/login.tsx

@@ -3,8 +3,6 @@ import { useTranslation, type PropsForTranslation } from '@helpwave/common/hooks
 import { Page } from '@/components/layout/Page'
 import titleWrapper from '@/utils/titleWrapper'
 import { tw } from '@twind/core'
-import { Input } from '@helpwave/common/components/user-input/Input'
-import { useState } from 'react'
 import { Button } from '@helpwave/common/components/Button'
 
 type LoginTranslation = {
@@ -20,14 +18,14 @@ const defaultLoginTranslations: Record<Languages, LoginTranslation> = {
     login: 'Login',
     email: 'Email',
     password: 'Password',
-    signIn: 'Sign In',
+    signIn: 'helpwave Sign In',
     register: 'Register',
   },
   de: {
     login: 'Login',
     email: 'Email',
     password: 'Passwort',
-    signIn: 'Einloggen',
+    signIn: 'helpwave Login',
     register: 'Registrieren',
   }
 }
@@ -38,12 +36,11 @@ export type LoginData = {
 }
 
 type LoginPageProps = {
-  login: (data: LoginData) => Promise<boolean>,
+  login: () => Promise<boolean>,
 }
 
 export const LoginPage = ({ login, overwriteTranslation }: PropsForTranslation<LoginTranslation, LoginPageProps>) => {
   const translation = useTranslation(defaultLoginTranslations, overwriteTranslation)
-  const [loginData, setLoginData] = useState<LoginData>({ email: '', password: '' })
 
   return (
     <Page
@@ -54,24 +51,11 @@ export const LoginPage = ({ login, overwriteTranslation }: PropsForTranslation<L
     >
       <div className={tw('flex flex-col bg-gray-100 max-w-[300px] p-8 gap-y-2 rounded-lg shadow-lg')}>
         <h2 className={tw('font-bold font-inter text-2xl')}>{translation.login}</h2>
-        <Input
-          label={{ name: translation.email }}
-          value={loginData.email}
-          type="email"
-          onChange={email => setLoginData({ ...loginData, email })}
-        />
-        <Input
-          label={{ name: translation.password }}
-          value={loginData.password}
-          type="password"
-          onChange={password => setLoginData({ ...loginData, password })}
-        />
-        <Button onClick={() => {
-          login(loginData)
-        }}>{translation.signIn}</Button>
+        <Button onClick={login}>{translation.signIn}</Button>
 
-        <Button onClick={() => {
-        }} className={tw('mt-6')}>{translation.register}</Button>
+        {/*
+        <Button onClick={() => {}} className={tw('mt-6')}>{translation.register}</Button>
+        */}
       </div>
     </Page>
   )

customer/config.ts

@@ -0,0 +1 @@
+export const apiURL = 'https://api.customer.helpwave.de'

customer/environment.d.ts

@@ -4,12 +4,9 @@
 declare namespace NodeJS {
   interface ProcessEnv {
     NODE_ENV?: string,
-    NEXT_PUBLIC_SHOW_STAGING_DISCLAIMER_MODAL?: string,
-    NEXT_PUBLIC_PLAYSTORE_LINK?: string,
-    NEXT_PUBLIC_APPSTORE_LINK?: string,
-    NEXT_PUBLIC_FEEDBACK_FORM_URL?: string,
-    NEXT_PUBLIC_FEATURES_FEED_URL?: string,
-    NEXT_PUBLIC_IMPRINT_URL?: string,
-    NEXT_PUBLIC_PRIVACY_URL?: string,
+    NEXT_PUBLIC_OIDC_PROVIDER: string,
+    NEXT_PUBLIC_CLIENT_ID: string,
+    NEXT_PUBLIC_REDIRECT_URI: string,
+    NEXT_PUBLIC_POST_LOGOUT_REDIRECT_URI: string,
   }
 }

customer/hooks/useAuth.tsx

@@ -1,64 +1,39 @@
 'use client' // Ensures this runs only on the client-side
 
-import type { PropsWithChildren } from 'react'
-import { createContext, useContext, useEffect, useState } from 'react'
-import Cookies from 'js-cookie'
+import type { ComponentType, PropsWithChildren } from 'react'
+import { useEffect } from 'react'
+import { createContext, useContext, useState } from 'react'
 import { tw } from '@twind/core'
 import { LoadingAnimation } from '@helpwave/common/components/LoadingAnimation'
-import type { LoginData } from '@/components/pages/login'
 import { LoginPage } from '@/components/pages/login'
-
-type Identity = {
-  token: string,
-  name: string,
-}
+import { login, logout, restoreSession } from '@/api/auth/authService'
+import type { User } from 'oidc-client-ts'
+import { REDIRECT_URI } from '@/api/auth/config'
 
 type AuthContextType = {
-  identity: Identity,
+  identity: User,
   logout: () => void,
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined)
 
 type AuthState = {
-  identity?: Identity,
+  identity?: User,
   isLoading: boolean,
 }
 
-const cookieName = 'authToken'
-
 export const AuthProvider = ({ children }: PropsWithChildren) => {
   const [{ isLoading, identity }, setAuthState] = useState<AuthState>({ isLoading: true })
 
-  const checkIdentity = () => {
-    setAuthState({ isLoading: true })
-    const token = Cookies.get(cookieName)
-    const newAuthState = !!token
-    if (newAuthState) {
-      const identity: Identity = { token: 'test-token', name: 'Max Mustermann' }
-      setAuthState({ identity, isLoading: false })
-    } else {
-      setAuthState({ isLoading: false })
-    }
-  }
-
-  // Check authentication state on first load
   useEffect(() => {
-    checkIdentity()
+    restoreSession().then(identity => {
+      setAuthState({
+        identity,
+        isLoading: false,
+      })
+    })
   }, [])
 
-  const login = async (_: LoginData) => {
-    // TODO do real login
-    Cookies.set(cookieName, 'testdata', { expires: 1 })
-    checkIdentity()
-    return true
-  }
-
-  const logout = () => {
-    Cookies.remove(cookieName)
-    checkIdentity()
-  }
-
   if (!identity && isLoading) {
     return (
       <div className={tw('flex flex-col items-center justify-center w-screen h-screen')}>
@@ -68,7 +43,12 @@ export const AuthProvider = ({ children }: PropsWithChildren) => {
   }
 
   if (!identity) {
-    return (<LoginPage login={login} />)
+    return (
+      <LoginPage login={async () => {
+        await login(REDIRECT_URI + `?redirect_uri=${encodeURIComponent(window.location.href)}`)
+        return true
+      }}/>
+    )
   }
 
   return (
@@ -78,11 +58,27 @@ export const AuthProvider = ({ children }: PropsWithChildren) => {
   )
 }
 
+export const withAuth = <P extends object>(Component: ComponentType<P>) => {
+  const WrappedComponent = (props: P) => (
+    <AuthProvider>
+      <Component {...props} />
+    </AuthProvider>
+  )
+  WrappedComponent.displayName = `withAuth(${Component.displayName || Component.name || 'Component'})`
+
+  return WrappedComponent
+}
+
+
 // Custom hook for using AuthContext
 export const useAuth = () => {
   const context = useContext(AuthContext)
   if (!context) {
     throw new Error('useAuth must be used within an AuthProvider')
   }
-  return context
+  const authHeader = {
+    'Content-Type': 'application/json',
+    'Authorization': `Bearer ${context.identity.access_token}`,
+  }
+  return { ...context, authHeader }
 }