fix: block navigation to authenticated routes (#2120)

Author: e-schneid

packages/website/lib/constants.js

@@ -20,8 +20,17 @@ if (globalThis.window) {
   }
 }
 
+const AUTHENTICATED_ROUTES = {
+  MANAGE: 'manage',
+  FILES: 'files',
+  NEW_FILE: 'new-file',
+  NEW_KEY: 'new-key',
+  PINNING_REQUEST: 'pinning-request',
+}
+
 // eslint-disable-next-line import/no-anonymous-default-export
 export default {
+  AUTHENTICATED_ROUTES,
   API: API,
   MAGIC_TOKEN: MAGIC_TOKEN,
 }

packages/website/lib/magic.js

@@ -59,11 +59,15 @@ export async function isLoggedIn() {
  * Login with email
  *
  * @param {string} email
+ * @param {string} [redirectPath]
  */
-export async function loginEmail(email) {
+export async function loginEmail(email, redirectPath) {
   const didToken = await getMagic().auth.loginWithMagicLink({
     email: email,
-    redirectURI: new URL('/callback', window.location.origin).href,
+    redirectURI: new URL(
+      `/callback${redirectPath ? '/' + redirectPath : ''}`,
+      window.location.origin
+    ).href,
   })
 
   if (didToken) {
@@ -78,11 +82,15 @@ export async function loginEmail(email) {
  * Login with social
  *
  * @param {import('@magic-ext/oauth').OAuthProvider} provider
+ * @param {string} [redirectPath]
  */
-export async function loginSocial(provider) {
+export async function loginSocial(provider, redirectPath) {
   await getMagic().oauth.loginWithRedirect({
     provider,
-    redirectURI: new URL('/callback', window.location.origin).href,
+    redirectURI: new URL(
+      `/callback${redirectPath ? '/' + redirectPath : ''}`,
+      window.location.origin
+    ).href,
   })
 }
 

packages/website/pages/_app.js

@@ -13,6 +13,7 @@ import * as Sentry from '@sentry/nextjs'
 import { UserContext } from 'lib/user'
 import BlockedUploadsModal from 'components/blockedUploadsModal.js'
 import Loading from 'components/loading'
+import constants from 'lib/constants'
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { staleTime: 60 * 1000 } },
@@ -26,33 +27,52 @@ const queryClient = new QueryClient({
 export default function App({ Component, pageProps }) {
   const router = useRouter()
   const [user, setUser] = useState(null)
+  const [isUserInitialized, setIsUserInitialized] = useState(false)
   const [isUserBlockedModalShowing, setIsUserBlockedModalShowing] =
     useState(false)
 
   const handleIsLoggedIn = useCallback(async () => {
     const data = await isLoggedIn()
-    if (!data) return
+    if (!data) {
+      setIsUserInitialized(true)
+      return
+    }
+
     if (data) {
       // @ts-ignore
       Sentry.setUser(user)
     }
-    const tags = await getUserTags()
-    const pendingTagProposals = await getUserRequests()
 
-    if (tags.HasAccountRestriction && !sessionStorage.hasSeenUserBlockedModal) {
-      sessionStorage.hasSeenUserBlockedModal = true
-      setIsUserBlockedModalShowing(true)
+    try {
+      const tags = await getUserTags()
+      const pendingTagProposals = await getUserRequests()
+      if (
+        tags.HasAccountRestriction &&
+        !sessionStorage.hasSeenUserBlockedModal
+      ) {
+        sessionStorage.hasSeenUserBlockedModal = true
+        setIsUserBlockedModalShowing(true)
+      }
+      setUser({
+        ...data,
+        // @ts-ignore
+        tags,
+        pendingTagProposals,
+      })
+    } catch (e) {
+      // do nothing
     }
+
     // @ts-ignore
-    setUser({
-      ...data,
-      // @ts-ignore
-      tags,
-      pendingTagProposals,
-    })
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  useEffect(() => {
+    if (user) {
+      setIsUserInitialized(true)
+    }
+  }, [user])
+
   useEffect(() => {
     handleIsLoggedIn()
   }, [router, handleIsLoggedIn])
@@ -67,14 +87,39 @@ export default function App({ Component, pageProps }) {
       // If redirectIfFound is also set, redirect if the user was found
       (pageProps.redirectIfFound && user)
     ) {
-      router.push(pageProps.redirectTo)
+      router.push(router.query.returnUrl ?? pageProps.redirectTo)
+    }
+  }, [pageProps, user, router, isUserInitialized])
+
+  const [pendingAuthCheckRoute, setPendingAuthCheckRoute] = useState('')
+
+  useEffect(() => {
+    if (pendingAuthCheckRoute && isUserInitialized) {
+      const str = pendingAuthCheckRoute.replace(/(^\/+|\/+$)/g, '')
+
+      if (
+        !user &&
+        Object.values(constants.AUTHENTICATED_ROUTES).includes(str)
+      ) {
+        router.push({
+          pathname: '/login',
+          query: {
+            returnUrl: str,
+          },
+        })
+      }
+      setPendingAuthCheckRoute('')
     }
-  }, [pageProps, user, router])
+  }, [pendingAuthCheckRoute, isUserInitialized, user, router])
 
   useEffect(() => {
     Router.events.on('routeChangeComplete', (route) => {
       countly.trackPageView(route)
+      setPendingAuthCheckRoute(route.split('?')[0].toLowerCase())
     })
+    setPendingAuthCheckRoute(
+      window.location.pathname.split('?')[0].toLowerCase()
+    )
   }, [])
 
   function handleClearUser() {
@@ -106,7 +151,7 @@ export default function App({ Component, pageProps }) {
       <QueryClientProvider client={queryClient}>
         <UserContext.Provider
           // @ts-ignore
-          value={{ user, handleClearUser }}
+          value={{ user, handleClearUser, handleIsLoggedIn }}
         >
           <Layout {...pageProps}>
             {(props) => <Component {...pageProps} {...props} />}

packages/website/pages/callback.js …te/pages/callback/[[...redirectPath]].jspackages/website/pages/callback.js renamed to packages/website/pages/callback/[[...redirectPath]].js packages/website/pages/callback.js renamed to packages/website/pages/callback/[[...redirectPath]].js

@@ -1,11 +1,13 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useQueryClient } from 'react-query'
-import { redirectMagic, redirectSocial } from '../lib/magic.js'
+import { redirectMagic, redirectSocial } from '../../lib/magic.js'
+import { useUser } from 'lib/user.js'
+import constants from 'lib/constants.js'
 
 /**
  *
- * @returns {{ props: import('../components/types.js').LayoutProps}}
+ * @returns {{ props: import('../../components/types.js').LayoutProps}}
  */
 export function getStaticProps() {
   return {
@@ -17,15 +19,41 @@ export function getStaticProps() {
   }
 }
 
+export function getStaticPaths() {
+  return {
+    paths: [
+      { params: { redirectPath: [''] } }, // redirect to default
+      ...Object.values(constants.AUTHENTICATED_ROUTES).map((route) => ({
+        params: { redirectPath: [route] },
+      })),
+    ],
+    fallback: false,
+  }
+}
+
 const Callback = () => {
   const router = useRouter()
   const queryClient = useQueryClient()
+  /** @type [string | undefined, any] */
+  const [pendingRedirect, setPendingRedirect] = useState()
+  const { user, handleIsLoggedIn } = useUser()
+
+  const redirectPath = '/' + (router.query.redirectPath?.[0] ?? 'files')
+
+  useEffect(() => {
+    if (typeof pendingRedirect === 'string' && user) {
+      router.push(pendingRedirect)
+      setPendingRedirect()
+    }
+  }, [pendingRedirect, user, router])
+
   useEffect(() => {
     const finishSocialLogin = async () => {
       try {
         await redirectSocial()
         await queryClient.invalidateQueries('magic-user')
-        router.push('/files')
+        handleIsLoggedIn()
+        setPendingRedirect(redirectPath)
       } catch (err) {
         console.error(err)
         await queryClient.invalidateQueries('magic-user')
@@ -36,7 +64,8 @@ const Callback = () => {
       try {
         await redirectMagic()
         await queryClient.invalidateQueries('magic-user')
-        router.push('/files')
+        handleIsLoggedIn()
+        setPendingRedirect(redirectPath)
       } catch (err) {
         console.error(err)
         await queryClient.invalidateQueries('magic-user')
@@ -49,7 +78,7 @@ const Callback = () => {
     if (router.query.provider) {
       finishSocialLogin()
     }
-  }, [router, router.query, queryClient])
+  }, [router, router.query, queryClient, redirectPath, handleIsLoggedIn])
 
   // TODO handle errors
   return null

packages/website/pages/login.js

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import Router from 'next/router'
+import { useRouter } from 'next/router'
 import { loginEmail, loginSocial } from '../lib/magic.js'
 import countly from '../lib/countly'
 import Button from '../components/button.js'
@@ -21,6 +21,11 @@ export default function Login() {
   const [errorMsg, setErrorMsg] = useState('')
   const [disabled, setDisabled] = useState(false)
   const [isRedirecting, setIsRedirecting] = useState(false)
+  const router = useRouter()
+  const returnPath =
+    typeof router.query.returnUrl === 'string'
+      ? router.query.returnUrl
+      : undefined
 
   /**
    * @param {import('react').ChangeEvent<HTMLFormElement>} e
@@ -32,9 +37,9 @@ export default function Login() {
     setDisabled(true)
 
     try {
-      await loginEmail(e.currentTarget.email.value)
+      await loginEmail(e.currentTarget.email.value, returnPath)
       await queryClient.invalidateQueries('magic-user')
-      Router.push('/files')
+      router.push(returnPath ?? '/files')
     } catch (/** @type {any} */ error) {
       setDisabled(false)
       console.error('An unexpected error happened occurred:', error)
@@ -55,7 +60,7 @@ export default function Login() {
             className="w-64"
             onClick={() => {
               setIsRedirecting(true)
-              loginSocial('github')
+              loginSocial('github', returnPath)
             }}
             tracking={{
               event: countly.events.LOGIN_CLICK,