Allow anonymous access to protected routes

.env

@@ -0,0 +1,9 @@
+# Allow the app to work in anonymous mode.
+#
+# This enables accessing app sections and API calls that
+# otherwise would require login.
+#
+# You CAN'T use this as part of your task01 solution, but
+# it might be useful if you want to work on task02 without
+# fully implementing task01 first.
+VITE_ALLOW_ANONYMOUS_ACCESS=false # true|false

docs/task-02.md

@@ -9,6 +9,8 @@ While they would love for us to implement it; they told us it would suffice for
 
 We believe there is value in that and after some conversation we agreed on implementing a quick solution to validate if there is actual interest in this by our customers.
 
+If you decided to start with this task before having [task 01](./task-01.md) fully working; you can disable the app's login requirement by setting `VITE_ALLOW_ANONYMOUS_ACCESS=true` in your `.env` file.
+
 **Dos and Do not's**
 
 - You **must** implement something that fullfil the club's needs

src/App.tsx

@@ -36,19 +36,28 @@ function AppRouter() {
     return <div>Loading authorization...</div>
   }
 
+  // Note:
+  // You can toggle this boolean for task02 to easily get past the authentication.
+  // This might prove useful if you want to start with task02 without completing task01;
+  // or if you are having issues with task01 and want to progress with something else.
+  // DO NOT USE this as part of your task01
+  const allowAnonymousAccess = import.meta.env.VITE_ALLOW_ANONYMOUS_ACCESS === 'true'
+
+  const canAccessProtectedRoutes = Boolean(auth.currentUser || allowAnonymousAccess)
+
   return (
     <Router>
       <Switch>
         <Route path="/login">
-          {auth.currentUser ? (
+          {canAccessProtectedRoutes ? (
             <Redirect to="/matches" />
           ) : (
             <Login initialValues={{ email: '[email protected]' }} />
           )}
         </Route>
 
         <Route path="/matches">
-          {auth.currentUser ? (
+          {canAccessProtectedRoutes ? (
             <Matches
               onLogoutRequest={() => {
                 auth.logout().catch((error: unknown) => {
@@ -61,7 +70,7 @@ function AppRouter() {
           )}
         </Route>
 
-        <Route>{auth.currentUser ? <Redirect to="/matches" /> : <Redirect to="/login" />}</Route>
+        <Route>{canAccessProtectedRoutes ? <Redirect to="/matches" /> : <Redirect to="/login" />}</Route>
       </Switch>
     </Router>
   )

src/lib/msw/handlers.ts

@@ -150,6 +150,10 @@ export const handlers: RequestHandler[] = [
   }),
 
   http.all('/api/*', async ({ request }) => {
+    if (import.meta.env.VITE_ALLOW_ANONYMOUS_ACCESS === 'true') {
+      return
+    }
+
     const auth = request.headers.get('authorization')
 
     if (!auth) {

src/vite-env.d.ts

@@ -1 +1,13 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  /**
+   * Whether or not we allow accessing the app and api without credentials.
+   *
+   * You can set this variable via `.env` file to skip the login.
+   *
+   * This might be useful if you want to start with task02 without doing
+   * task01 first.
+   */
+  readonly VITE_ALLOW_ANONYMOUS_ACCESS: string
+}