refactor: improve hoc, logouthandler

example/src/pages/_app.tsx

@@ -30,6 +30,7 @@ class MyApp extends App {
 export default process.env.PASSWORD_PROTECT
   ? withPasswordProtect(MyApp, {
       loginComponentProps: {
+        backUrl: 'https://github.com/storyofams/next-password-protect',
         logo: 'https://storyofams.com/public/[email protected]',
       },
     })

example/src/pages/api/logout.ts

@@ -0,0 +1,5 @@
+import { logoutHandler } from '@storyofams/next-password-protect';
+
+export default logoutHandler({
+  cookieName: 'authorization',
+});

example/src/pages/index.tsx

@@ -3,13 +3,23 @@ import React from 'react';
 import { NextSeo } from 'next-seo';
 
 const Home = () => {
+  const clearCookie = async () => {
+    await fetch('/api/logout', {
+      method: 'post',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+    });
+    window.location.reload();
+  };
+
   return (
     <>
       <NextSeo
         title="Next password protect"
         description="Next password protect example app"
       />
       <h1>Logged in page</h1>
+      <button onClick={clearCookie}>Logout</button>
     </>
   );
 };

jest.config.js

@@ -20,4 +20,5 @@ module.exports = {
     '@testing-library/jest-dom/extend-expect',
     './jest.setup.js',
   ],
+  collectCoverageFrom: ['src/**/*.{ts,tsx}'],
 };

src/api/__tests__/logoutHandler.test.ts

@@ -0,0 +1,83 @@
+import { EventEmitter } from 'events';
+import { createMocks } from 'node-mocks-http';
+
+import { logoutHandler } from '../logoutHandler';
+
+describe('[api] logoutHandler', () => {
+  it('should set max age on cookie to now to clear', async () => {
+    const { req, res } = createMocks(
+      { method: 'POST', body: { password: 'password' } },
+      { eventEmitter: EventEmitter },
+    );
+
+    const maxAge = 0;
+    const now = Date.now();
+
+    await logoutHandler()(req as any, res as any);
+
+    expect(res._getStatusCode()).toBe(200);
+    expect(res._getHeaders()).toHaveProperty(
+      'set-cookie',
+      `next-password-protect=; Max-Age=${maxAge}; Path=/; Expires=${new Date(
+        now + maxAge,
+      ).toUTCString()}; HttpOnly`,
+    );
+
+    jest.restoreAllMocks();
+  });
+
+  it('should handle secure option', async () => {
+    const { req, res } = createMocks(
+      { method: 'POST', body: { password: 'password' } },
+      { eventEmitter: EventEmitter },
+    );
+
+    const maxAge = 0;
+    const now = Date.now();
+
+    await logoutHandler({ cookieSecure: true })(req as any, res as any);
+
+    expect(res._getStatusCode()).toBe(200);
+    expect(res._getHeaders()).toHaveProperty(
+      'set-cookie',
+      `next-password-protect=; Max-Age=${maxAge}; Path=/; Expires=${new Date(
+        now + maxAge,
+      ).toUTCString()}; HttpOnly; Secure`,
+    );
+
+    jest.restoreAllMocks();
+  });
+
+  it('should throw on incorrect method', async () => {
+    const { req, res } = createMocks(
+      { method: 'GET' },
+      { eventEmitter: EventEmitter },
+    );
+
+    await logoutHandler()(req as any, res as any);
+
+    expect(res._getStatusCode()).toBe(500);
+
+    jest.restoreAllMocks();
+  });
+
+  it('should gracefully error', async () => {
+    const { req, res } = createMocks(
+      { method: 'POST', body: { password: 'password' } },
+      { eventEmitter: EventEmitter },
+    );
+
+    jest.spyOn(Date, 'now').mockImplementation(() => {
+      throw new Error();
+    });
+
+    await logoutHandler()(req as any, res as any);
+
+    expect(res._getStatusCode()).toBe(500);
+    expect(res._getData()).toBe(
+      JSON.stringify({ message: 'An error has occured.' }),
+    );
+
+    jest.restoreAllMocks();
+  });
+});

src/api/index.ts

@@ -1,2 +1,3 @@
 export * from './passwordCheckHandler';
 export * from './loginHandler';
+export * from './logoutHandler';

src/api/logoutHandler.ts

@@ -0,0 +1,38 @@
+import { Request, Response } from 'express';
+
+import { sendJson } from './sendJson';
+import { setCookie } from './setCookie';
+
+interface PasswordProtectHandlerOptions {
+  /* @default next-password-protect */
+  cookieName?: string;
+  cookieSameSite?: boolean | 'lax' | 'none' | 'strict';
+  cookieSecure?: boolean;
+}
+
+export const logoutHandler = (
+  options?: PasswordProtectHandlerOptions,
+) => async (req: Request, res: Response) => {
+  res.setHeader('Content-Type', 'application/json');
+
+  try {
+    if (req.method !== 'POST') {
+      throw new Error('Invalid method.');
+    }
+
+    setCookie(res, options?.cookieName || 'next-password-protect', '', {
+      httpOnly: true,
+      sameSite: options?.cookieSameSite || false,
+      secure:
+        options?.cookieSecure !== undefined
+          ? options?.cookieSecure
+          : process.env.NODE_ENV === 'production',
+      path: '/',
+      maxAge: 0,
+    });
+
+    sendJson(res, 200);
+  } catch (err) {
+    sendJson(res, 500, { message: err.message || 'An error has occured.' });
+  }
+};

src/hoc/LoginComponent.tsx

@@ -252,6 +252,7 @@ export const LoginComponent = ({
                 color: buttonColor || '#111',
                 marginTop: '32px',
                 cursor: 'pointer',
+                textAlign: 'center',
               }}
             >
               {isBusy ? 'Logging in...' : 'Login'}

src/hoc/withPasswordProtect.tsx

@@ -1,18 +1,18 @@
-import React, { ReactNode, useEffect, useState } from 'react';
+import React, { ElementType, useEffect, useState } from 'react';
+import { useAmp } from 'next/amp';
 import type { AppProps } from 'next/app';
 
 import {
   LoginComponent as DefaultLoginComponent,
   LoginComponentProps,
 } from './LoginComponent';
-import { withAuth } from './withAuth';
 
 interface PasswordProtectHOCOptions {
   /* @default /api/passwordCheck */
   checkApiUrl?: string;
   /* @default /api/login */
   loginApiUrl?: string;
-  loginComponent?: ReactNode;
+  loginComponent?: ElementType;
   loginComponentProps?: Omit<LoginComponentProps, 'apiUrl'>;
 }
 
@@ -22,6 +22,7 @@ export const withPasswordProtect = (
   options?: PasswordProtectHOCOptions,
 ) => {
   const ProtectedApp = ({ Component, pageProps, ...props }: AppProps) => {
+    const isAmp = useAmp();
     const [isAuthenticated, setAuthenticated] = useState<undefined | boolean>(
       undefined,
     );
@@ -46,20 +47,26 @@ export const withPasswordProtect = (
       checkIfLoggedIn();
     }, []);
 
+    if (isAuthenticated === undefined) {
+      return null;
+    }
+
+    if (isAuthenticated) {
+      return <App Component={Component} pageProps={pageProps} {...props} />;
+    }
+
+    // AMP is not yet supported
+    if (isAmp) {
+      return null;
+    }
+
+    const LoginComponent: ElementType =
+      options?.loginComponent || DefaultLoginComponent;
+
     return (
-      <App
-        Component={withAuth(
-          Component,
-          options?.loginComponent || DefaultLoginComponent,
-          pageProps,
-          isAuthenticated,
-          {
-            apiUrl: options?.loginApiUrl,
-            ...(options?.loginComponentProps || {}),
-          },
-        )}
-        pageProps={pageProps}
-        {...props}
+      <LoginComponent
+        apiUrl={options?.loginApiUrl}
+        {...(options?.loginComponentProps || {})}
       />
     );
   };