State token fix

src/App.tsx

@@ -48,13 +48,13 @@ function App(_: AppProps) {
       <div className="app bg-gray-50 min-h-screen flex flex-col">
         {!isValid(auth) ? (
           <Router>
-            <Login path="/login" />
+            <Login default path="/login" />
             <LoginCallback path="/login-callback" />
           </Router>
         ) : (
           <Layout>
             <Router>
-              <Dashboard path="/dashboard" />
+              <Dashboard default path="/dashboard" />
               <Users path="/users" />
               <Apps path="/apps" />
               <AppSingle path="/apps/:id" />

src/modules/login/Login.tsx

@@ -4,6 +4,7 @@ import clsx from 'clsx';
 import { LockClosedIcon } from '@heroicons/react/solid';
 
 import { performApiCall } from 'src/services/api';
+import { showToast, ToastType } from 'src/common/util/show-toast';
 
 type LoginProps = RouteComponentProps;
 
@@ -20,27 +21,10 @@ export function Login(_: LoginProps) {
         window.location.href = data.authorizationUrl;
       }
     } catch (e: any) {
-      // continue
+      showToast('Something went wrong', ToastType.Error);
     }
-
-    // @ts-ignore
-    // if (res.ok) {
-    //   showToast('Logged in!');
-    // } else {
-    //   showToast('Username or password incorrect', ToastType.Error);
-    // }
   };
 
-  // useEffect(() => {
-  //   if (isValid(auth)) {
-  //     navigate('/dashboard');
-  //   }
-  // }, [auth]);
-
-  // if (isValid(auth)) {
-  //   return null;
-  // }
-
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="max-w-md w-full space-y-8">

src/modules/login/LoginCallback.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { RouteComponentProps } from '@reach/router';
+import { navigate, RouteComponentProps } from '@reach/router';
 import { useAuth } from 'src/services/auth';
 import { showToast, ToastType } from 'src/common/util/show-toast';
 
@@ -7,19 +7,25 @@ type LoginCallbackProps = RouteComponentProps;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function LoginCallback(_: LoginCallbackProps) {
+  const currentURL = window.location.href;
+  const urlParams = new URLSearchParams(currentURL);
+  const state = urlParams.get('state');
+
   const { logIn } = useAuth();
 
   useEffect(() => {
-    const res = logIn();
+    if (state) {
+      const res = logIn(state);
 
       // @ts-ignore
       if (res.ok) {
         showToast('Logged in');
       } else {
         showToast('Something went wrong', ToastType.Error);
-      // navigate('/login');
+        navigate('/login');
       }
-  }, [logIn]);
+    }
+  }, [logIn, state]);
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">

src/services/auth/hooks/use-auth.ts

@@ -6,9 +6,12 @@ export function useAuth() {
   const dispatch = useDispatch();
   const auth = useSelector(getAuth);
 
-  const logIn = useCallback(() => {
-    return dispatch(signIn());
-  }, [dispatch]);
+  const logIn = useCallback(
+    (state) => {
+      return dispatch(signIn(state));
+    },
+    [dispatch],
+  );
 
   const logOut = useCallback(() => {
     return dispatch(signOut());

src/services/auth/redux/actions.ts

@@ -15,11 +15,14 @@ const signOutAction = (): SuccessAction => ({
   payload: null,
 });
 
-export const signIn = () =>
+export const signIn = (state: string) =>
   createApiAction(
     {
       path: '/hydra/callback',
       method: 'GET',
+      headers: {
+        state,
+      },
     },
     [AuthActionTypes.SIGN_IN_START, AuthActionTypes.SIGN_IN_SUCCESS, AuthActionTypes.SIGN_IN_FAILURE],
   );