Implement skip auth

Author: Alexandru Comanescu

src/components/account-popover.js

@@ -3,7 +3,7 @@ import Router from 'next/router';
 import PropTypes from 'prop-types';
 import { Box, MenuItem, MenuList, Popover, Typography } from '@mui/material';
 import { AuthContext } from '../contexts/auth-context';
-import { auth } from '../lib/auth';
+import { auth, ENABLE_AUTH } from '../lib/auth';
 
 export const AccountPopover = (props) => {
   const { anchorEl, onClose, open, ...other } = props;
@@ -12,6 +12,28 @@ export const AccountPopover = (props) => {
   const handleSignOut = async () => {
     onClose?.();
 
+    // Check if authentication with Zalter is enabled
+    // If not enabled, then redirect is not required
+    if (!ENABLE_AUTH) {
+      return;
+    }
+
+    // Check if auth has been skipped
+    // From sign-in page we may have set "skip-auth" to "true"
+    // If this has been skipped, then redirect to "sign-in" directly
+    const authSkipped = globalThis.sessionStorage.getItem('skip-auth') === 'true';
+
+    if (authSkipped) {
+      // Cleanup the skip auth state
+      globalThis.sessionStorage.removeItem('skip-auth');
+
+      // Redirect to sign-in page
+      Router
+        .push('/sign-in')
+        .catch(console.error);
+      return;
+    }
+
     try {
       // This can be call inside AuthProvider component, but we do it here for simplicity
       await auth.signOut();

src/contexts/auth-context.js

@@ -16,15 +16,17 @@ const initialState = {
 
 const handlers = {
   [HANDLERS.INITIALIZE]: (state, action) => {
+    const user = action.payload;
+
     return {
       ...state,
       ...(
         // if payload (user) is provided, then is authenticated
-        action.payload
+        user
           ? ({
             isAuthenticated: true,
             isLoading: false,
-            user: action.payload
+            user
           })
           : ({
             isLoading: false
@@ -33,10 +35,12 @@ const handlers = {
     };
   },
   [HANDLERS.SIGN_IN]: (state, action) => {
+    const user = action.payload;
+
     return {
       ...state,
       isAuthenticated: true,
-      user: action.payload
+      user
     };
   },
   [HANDLERS.SIGN_OUT]: (state) => {
@@ -69,12 +73,28 @@ export const AuthProvider = (props) => {
 
     initialized.current = true;
 
+    // Check if auth has been skipped
+    // From sign-in page we may have set "skip-auth" to "true"
+    const authSkipped = globalThis.sessionStorage.getItem('skip-auth') === 'true';
+
+    if (authSkipped) {
+      const user = {};
+
+      dispatch({
+        type: HANDLERS.INITIALIZE,
+        payload: user
+      });
+      return;
+    }
+
     // Check if authentication with Zalter is enabled
     // If not, then set user as authenticated
     if (!ENABLE_AUTH) {
+      const user = {};
+
       dispatch({
         type: HANDLERS.INITIALIZE,
-        payload: {}
+        payload: user
       });
       return;
     }
@@ -83,17 +103,19 @@ export const AuthProvider = (props) => {
       // Check if user is authenticated
       const isAuthenticated = await auth.isAuthenticated();
 
-      let user;
-
       if (isAuthenticated) {
         // Get user from your database
-        user = {};
+        const user = {};
+
+        dispatch({
+          type: HANDLERS.INITIALIZE,
+          payload: user
+        });
+      } else {
+        dispatch({
+          type: HANDLERS.INITIALIZE
+        });
       }
-
-      dispatch({
-        type: HANDLERS.INITIALIZE,
-        payload: user
-      });
     } catch (err) {
       console.error(err);
       dispatch({

src/pages/sign-in/index.js

@@ -3,13 +3,16 @@ import Head from 'next/head';
 import NextLink from 'next/link';
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
-import { Box, Button, Grid, Tab, Tabs, TextField, Typography } from '@mui/material';
+import { Box, Button, FormHelperText, Grid, Tab, Tabs, TextField, Typography } from '@mui/material';
 import { auth, ENABLE_AUTH } from '../../lib/auth';
 import { Logo } from '../../components/logo';
+import { useAuthContext } from '../../contexts/auth-context';
+import Router from 'next/router';
 
 const Page = () => {
   const [tab, setTab] = useState('email');
   const [emailSent, setEmailSent] = useState(false);
+  const authContext = useAuthContext();
   const formik = useFormik({
     initialValues: {
       email: '',
@@ -57,6 +60,22 @@ const Page = () => {
     setEmailSent(false);
   };
 
+  const handleSkip = () => {
+    // Since skip is requested, we set a fake user as authenticated
+    const user = {};
+
+    // Update Auth Context state
+    authContext.signIn(user);
+
+    // Persist the skip for AuthProvider initialize call
+    globalThis.sessionStorage.setItem('skip-auth', 'true');
+
+    // Redirect to home page
+    Router
+      .push('/')
+      .catch(console.error);
+  };
+
   return (
     <>
       <Head>
@@ -209,6 +228,9 @@ const Page = () => {
                           value={formik.values.email}
                           variant="outlined"
                         />
+                        <FormHelperText sx={{ mt: 1 }}>
+                          Enter a valid email since this is a fully integrated authentication system. Optionally you can skip.
+                        </FormHelperText>
                         {formik.errors.submit && (
                           <Typography
                             color="error"
@@ -227,6 +249,14 @@ const Page = () => {
                         >
                           Continue
                         </Button>
+                        <Button
+                          fullWidth
+                          size="large"
+                          sx={{ mt: 3 }}
+                          onClick={handleSkip}
+                        >
+                          Skip authentication
+                        </Button>
                       </div>
                     )}
                     {tab === 'phoneNumber' && (