Redirect to original location after login (#9549)

* redirect to studio after login

* added redirect for admin panel

* persist `redirectUrl` as search params in url

* correct type error

---------

Co-authored-by: Hanzla Mateen <[email protected]>

Author: aditya-mitra

packages/client-core/src/admin/adminRoutes.tsx

@@ -24,7 +24,7 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import React, { lazy, Suspense, useEffect } from 'react'
-import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
+import { Route, Routes, useLocation } from 'react-router-dom'
 
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import Dashboard from '@etherealengine/ui/src/primitives/mui/Dashboard'
@@ -36,11 +36,12 @@ import Analytics from './components/Analytics'
 import { DefaultAdminRoutes } from './DefaultAdminRoutes'
 
 import '@etherealengine/engine/src/EngineModule'
+import { RouterState } from '../common/services/RouterService'
 
 const $allowed = lazy(() => import('@etherealengine/client-core/src/admin/allowedRoutes'))
 
 const AdminRoutes = () => {
-  const _location = useLocation()
+  const location = useLocation()
   const admin = useHookstate(getMutableState(AuthState)).user
 
   const allowedRoutes = useHookstate(getMutableState(AllowedAdminRoutesState))
@@ -65,12 +66,13 @@ const AdminRoutes = () => {
   }, [scopes])
 
   if (admin?.id?.value?.length! > 0 && !admin?.scopes?.value?.find((scope) => scope.type === 'admin:admin')) {
-    return <Navigate to={{ pathname: '/' }} />
+    RouterState.navigate('/', { redirectUrl: location.pathname })
+    return <></>
   }
 
   return (
     <Dashboard>
-      <Suspense fallback={<LoadingCircle message={`Loading ${_location.pathname.split('/')[2]}...`} />}>
+      <Suspense fallback={<LoadingCircle message={`Loading ${location.pathname.split('/')[2]}...`} />}>
         <Routes>
           <Route path="/*" element={<$allowed />} />
           {<Route path="/" element={<Analytics />} />}

packages/client-core/src/common/services/RouterService.ts

@@ -25,20 +25,26 @@ Ethereal Engine. All Rights Reserved.
 
 import i18n from 'i18next'
 import { lazy, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 
 import { routePath, RouteType } from '@etherealengine/common/src/schema.type.module'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { defineState, getMutableState, NO_PROXY, useHookstate } from '@etherealengine/hyperflux'
 import { loadRoute } from '@etherealengine/projects/loadRoute'
 
+type QueryParamsType = { [key: string]: string }
+
 export const RouterState = defineState({
   name: 'RouterState',
   initial: () => ({
-    pathname: location.pathname
+    pathname: location.pathname,
+    queryParams: null as QueryParamsType | null
   }),
-  navigate: (pathname: string) => {
-    getMutableState(RouterState).pathname.set(pathname)
+  navigate: (pathname: string, queryParams: QueryParamsType | { redirectUrl: string } = {}) => {
+    getMutableState(RouterState).set({
+      pathname,
+      queryParams
+    })
   }
 })
 
@@ -83,6 +89,7 @@ export const useCustomRoutes = () => {
 
   const navigate = useNavigate()
   const routerState = useHookstate(getMutableState(RouterState))
+  const [_, setSearchParams] = useSearchParams()
 
   useEffect(() => {
     getCustomRoutes().then((routes) => {
@@ -96,6 +103,12 @@ export const useCustomRoutes = () => {
     }
   }, [location.pathname])
 
+  useEffect(() => {
+    if (routerState.queryParams.value) {
+      setSearchParams(routerState.queryParams.value)
+    }
+  }, [routerState.queryParams])
+
   useEffect(() => {
     if (location.pathname !== routerState.pathname.value) {
       navigate(routerState.pathname.value)

packages/client-core/src/user/services/AuthService.ts

@@ -343,10 +343,10 @@ export const AuthService = {
   async loginUserByOAuth(service: string, location: any) {
     getMutableState(AuthState).merge({ isProcessing: true, error: '' })
     const token = getState(AuthState).authUser.accessToken
-    const path = location?.state?.from || location.pathname
+    const path = new URLSearchParams(location.search).get('redirectUrl') || location.pathname
 
     const redirectConfig = {
-      path: path
+      path
     } as Record<string, string>
 
     const currentUrl = new URL(window.location.href)

packages/client/src/pages/editor/editor.tsx

@@ -26,7 +26,7 @@ Ethereal Engine. All Rights Reserved.
 import { useHookstate } from '@hookstate/core'
 import { t } from 'i18next'
 import React, { Suspense, useEffect, useState } from 'react'
-import { Route, Routes, useNavigate, useParams } from 'react-router-dom'
+import { Route, Routes, useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import { RouterState } from '@etherealengine/client-core/src/common/services/RouterService'
 import { LoadingCircle } from '@etherealengine/client-core/src/components/LoadingCircle'
@@ -77,6 +77,7 @@ const EditorRouter = () => {
 }
 
 const EditorProtectedRoutes = () => {
+  const location = useLocation()
   const authState = useHookstate(getMutableState(AuthState))
   const user = authState.user
   const [isAuthorized, setAuthorized] = useState<boolean | null>(null)
@@ -85,7 +86,7 @@ const EditorProtectedRoutes = () => {
     if (user.scopes.value) {
       const hasAccess = userHasAccess('editor:write')
       if (!hasAccess) {
-        RouterState.navigate('/')
+        RouterState.navigate('/', { redirectUrl: location.pathname })
         setAuthorized(false)
       } else setAuthorized(true)
     }