Merge pull request #45 from charamza/master

Feat/bypass protection for specified routes

README.md

@@ -135,6 +135,7 @@ Option | Description | Default value
 `loginApiUrl`| Relative path of the api route handled by `loginHandler` | `'/api/login'`
 `loginComponent`| Supply your own React component to show as login prompt | `LoginComponent`
 `loginComponentProps`| Properties object to customize the login prompt, without overriding the entire component (see below) | `{}`
+`bypassProtection`| Bypass protection for specific routes, decided by callback with `NextRouter` param | `({ route }) => false`
 
 The `loginComponentProps` object can contain any of the following options:
 

src/hoc/__tests__/withPasswordProtect.test.tsx

@@ -4,6 +4,7 @@ import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import * as hooks from 'next/amp';
 
+import * as nextRouter from 'next/router';
 import { withPasswordProtect } from '../withPasswordProtect';
 
 const App = ({ Component }) => <Component />;
@@ -150,4 +151,52 @@ describe('[hoc] withPasswordProtect', () => {
       expect(screen.getByText('Password')).toBeInTheDocument();
     });
   });
+
+  it('should be able to bypass protection for specified routes', async () => {
+    const Wrapped = withPasswordProtect(App, {
+      bypassProtection: ({ route }) => route === '/bypassed',
+    });
+
+    // ORDINARY PAGE
+    jest.spyOn(require('next/router'), 'useRouter').mockImplementation(() => ({
+      route: '/',
+    }));
+
+    await act(async () => {
+      render(
+        <Wrapped
+          Component={() => <div>hidden</div>}
+          pageProps={{}}
+          router={
+            {
+              route: '/bypassed',
+            } as nextRouter.Router
+          }
+        />,
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Password')).toBeInTheDocument();
+    });
+
+    // BYPASSED PAGE
+    jest.spyOn(require('next/router'), 'useRouter').mockImplementation(() => ({
+      route: '/bypassed',
+    }));
+
+    await act(async () => {
+      render(
+        <Wrapped
+          Component={() => <div>hidden</div>}
+          pageProps={{}}
+          router={{} as any}
+        />,
+      );
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('hidden')).toBeInTheDocument();
+    });
+  });
 });

src/hoc/withPasswordProtect.tsx

@@ -2,6 +2,7 @@ import React, { ElementType, useEffect, useState } from 'react';
 import { useAmp } from 'next/amp';
 import type { AppProps } from 'next/app';
 
+import { NextRouter, useRouter } from 'next/router';
 import {
   LoginComponent as DefaultLoginComponent,
   LoginComponentProps,
@@ -14,6 +15,7 @@ interface PasswordProtectHOCOptions {
   loginApiUrl?: string;
   loginComponent?: ElementType;
   loginComponentProps?: Omit<LoginComponentProps, 'apiUrl'>;
+  bypassProtection?: (route: NextRouter) => boolean;
 }
 
 /// TODO: improve App typing
@@ -26,6 +28,7 @@ export const withPasswordProtect = (
     const [isAuthenticated, setAuthenticated] = useState<undefined | boolean>(
       undefined,
     );
+    const router = useRouter();
 
     const checkIfLoggedIn = async () => {
       try {
@@ -51,7 +54,8 @@ export const withPasswordProtect = (
       return null;
     }
 
-    if (isAuthenticated) {
+    const bypassProtection = options?.bypassProtection?.(router) ?? false;
+    if (isAuthenticated || bypassProtection) {
       return <App Component={Component} pageProps={pageProps} {...props} />;
     }