fix(auth): redirection works again in mock and regular mode

apps/polyflix/src/main.tsx

@@ -111,13 +111,22 @@ const PolyflixApp = () => {
     }
   }
 
+  // We want to redirect the user to the wanted page after the authentication
+  // So we get the current url and pass it to the AuthRouter
+  const wantedUri = window.location.href
+
   return (
     <Router>
       <Switch>
-        {/* We want the user to be redirected to home page if already logged in */}
+        {/* We want the user to be redirected if already logged in or not */}
         <Route
           path="/auth"
-          render={() => <AuthRouter isAuthenticated={isAuthenticated} />}
+          render={() => (
+            <AuthRouter
+              isAuthenticated={isAuthenticated}
+              redirectUrl={wantedUri}
+            />
+          )}
         />
         <Route path="/certificate/:id" component={CertificatePage} />
 

apps/polyflix/src/modules/authentication/auth.router.tsx

@@ -8,20 +8,33 @@ import { MockAuthenticationPage } from './pages/Mock.page'
 
 interface Props {
   isAuthenticated: boolean
+  redirectUrl: string
 }
 
-export const AuthRouter = ({ isAuthenticated }: Props) => {
+export const AuthRouter = ({
+  isAuthenticated,
+  redirectUrl: redirectUri,
+}: Props) => {
   const { url } = useRouteMatch()
 
+  // If we are in a mocked environment, we don't want to redirect to keycloak
   if (!isAuthenticated && environment.mocked) {
-    return <MockAuthenticationPage />
+    return <MockAuthenticationPage redirectUri={redirectUri} />
   }
 
   return (
     <Switch>
-      <Route exact path={`${url}/redirect`} component={RedirectPage} />
+      <Route
+        exact
+        path={`${url}/redirect`}
+        render={() => <RedirectPage redirectUri={redirectUri} />}
+      />
       <PrivateRoute condition={!isAuthenticated} redirectTo={'/'}>
-        <Route exact path={`${url}/login`} component={RedirectPage} />
+        <Route
+          exact
+          path={`${url}/login`}
+          render={() => <RedirectPage redirectUri={redirectUri} />}
+        />
       </PrivateRoute>
     </Switch>
   )

apps/polyflix/src/modules/authentication/pages/Mock.page.tsx

@@ -7,19 +7,23 @@ import { User } from '@users/models/user.model'
 import { BaseUsers } from 'mock-server'
 import { useHistory } from 'react-router-dom'
 
-export function MockAuthenticationPage() {
+interface Props {
+  redirectUri: string
+}
+
+export function MockAuthenticationPage({ redirectUri: redirectUri }: Props) {
   const authService = useInjection<AuthService>(AuthService)
   const history = useHistory()
   let { keycloak } = useKeycloak()
 
-  function login(user: User) {
+  function login(user: User, redirectUrl: string = '/') {
     keycloak.subject = user.id
     authService
       .getUser()
       .catch(console.error)
       .finally(() => {
         keycloak.token = 'my-mock-token'
-        history.push('/')
+        history.push(redirectUrl)
       })
   }
 
@@ -47,7 +51,7 @@ export function MockAuthenticationPage() {
             <Button
               sx={{ mr: 3 }}
               variant="contained"
-              onClick={() => login(user as unknown as User)}
+              onClick={() => login(user as unknown as User, redirectUri)}
               key={user.id}
             >
               Use app as {user.username}

apps/polyflix/src/modules/authentication/pages/Redirect.page.tsx

@@ -7,11 +7,16 @@ import { useInjection } from '@polyflix/di'
 import { LoadingLayout } from '@core/layouts/Loading/Loading.layout'
 
 import { AuthService } from '@auth/services/auth.service'
+import { KeycloakLoginOptions } from 'keycloak-js'
+
+interface Props {
+  redirectUri: string | undefined
+}
 
 /**
  * The page we land on when keycloak auth is successful
  */
-export const RedirectPage = () => {
+export const RedirectPage = ({ redirectUri: redirectUri }: Props) => {
   const authService = useInjection<AuthService>(AuthService)
 
   const [isFetching, setIsFetching] = useState<boolean>(true)
@@ -28,9 +33,18 @@ export const RedirectPage = () => {
     }
   }, [keycloak])
 
-  if (!isKeycloakAuthenticated) keycloak.login()
+  const loginOptions: KeycloakLoginOptions = {
+    redirectUri,
+  }
+  if (!isKeycloakAuthenticated) {
+    if (redirectUri) {
+      keycloak.login(loginOptions)
+    } else {
+      keycloak.login()
+    }
+  }
 
   if (!initialized || isFetching) return <LoadingLayout />
 
-  return <Redirect to="/" />
+  return <Redirect to={redirectUri ?? '/'} />
 }