feat: add signup button, fix 'back' button on login

src/auth.ts

@@ -40,7 +40,7 @@ async function getClient() {
 interface AuthClient {
   isAuthenticated(): Promise<boolean>;
   user(): Promise<undefined | User>;
-  login(redirectTo: string): Promise<void>;
+  login(redirectTo: string, isSignupFlow?: boolean): Promise<void>;
   handleSigninRedirect(): Promise<void>;
   logout(): Promise<void>;
   getToken(): Promise<string | void>;
@@ -57,10 +57,11 @@ export const authClient: AuthClient = {
     const user = await client.getUser();
     return user;
   },
-  async login(redirectTo: string) {
+  async login(redirectTo: string, isSignupFlow: boolean = false) {
     const client = await getClient();
     await client.loginWithRedirect({
       authorizationParams: {
+        screen_hint: isSignupFlow ? 'signup' : 'login',
         redirect_uri:
           window.location.origin +
           ROUTES.LOGIN_RESULT +

src/constants/routes.ts

@@ -3,6 +3,7 @@ export const ROUTES = {
   LOGOUT: '/logout',
   LOGIN: '/login',
   LOGIN_WITH_REDIRECT: () => '/login?from=' + encodeURIComponent(window.location.pathname),
+  SIGNUP_WITH_REDIRECT: () => '/login?signup&from=' + encodeURIComponent(window.location.pathname),
   LOGIN_RESULT: '/login-result',
   FILES: '/files',
   MY_FILES: '/files/mine',

src/router.tsx

@@ -127,11 +127,19 @@ export const router = createBrowserRouter(
           // If they’re not authenticated, send them to Auth0
           // Watch for a `from` query param, as unprotected routes will redirect
           // to here for them to auth first
+          // Also watch for the presence of a `signup` query param, which means
+          // send the user to sign up flow, not login
           const url = new URL(request.url);
-          const redirectTo = url.searchParams.get('from') || '';
-          await authClient.login(redirectTo);
-
-          return null;
+          const redirectTo = url.searchParams.get('from') || '/';
+          const isSignupFlow = url.searchParams.get('signup') !== null;
+          await authClient.login(redirectTo, isSignupFlow);
+
+          // auth0 will re-route us (above) but telling react-router where we
+          // are re-routing to makes sure that this doesn't end up in the history stack
+          // but we have to add an artifical delay that's long enough for
+          // the auth0 navigation to take place
+          await new Promise((resolve) => setTimeout(resolve, 10000));
+          return redirect(redirectTo);
         }}
       />
       <Route

src/ui/components/PermissionOverlay.tsx

@@ -1,4 +1,4 @@
-import { Alert, Button, Paper, useTheme } from '@mui/material';
+import { Alert, Button, Paper, Stack, useTheme } from '@mui/material';
 import React, { useState } from 'react';
 import { isMobile } from 'react-device-detect';
 import { Link, useSubmit } from 'react-router-dom';
@@ -14,6 +14,7 @@ export function PermissionOverlay() {
   const [isOpen, setIsOpen] = useState<boolean>(true);
   const { permission } = useRecoilValue(editorInteractionStateAtom);
   const { name, contents } = useFileContext();
+  const theme = useTheme();
   const submit = useSubmit();
 
   if ((permission === OWNER || permission === EDITOR) && isMobile && isOpen) {
@@ -34,15 +35,20 @@ export function PermissionOverlay() {
           severity="info"
           sx={{ width: '100%' }}
           action={
-            <Button
-              component={Link}
-              to={ROUTES.LOGIN_WITH_REDIRECT()}
-              variant="contained"
-              size="small"
-              disableElevation
-            >
-              Log in
-            </Button>
+            <Stack direction="row" gap={theme.spacing(1)}>
+              <Button component={Link} to={ROUTES.LOGIN_WITH_REDIRECT()} variant="outlined" size="small">
+                Log in
+              </Button>
+              <Button
+                component={Link}
+                to={ROUTES.SIGNUP_WITH_REDIRECT()}
+                variant="contained"
+                size="small"
+                disableElevation
+              >
+                Sign up
+              </Button>
+            </Stack>
           }
         >
           <strong>Welcome to Quadratic.</strong> You must log in to edit this file.