feat: 🚀 add next password protect (#79)

Co-authored-by: Maren Osnabrug <[email protected]>
Co-authored-by: MitchelvanBever <[email protected]>

next.config.js

@@ -30,6 +30,8 @@ module.exports = withBundleAnalyzer(
       // marked for the release they belong to. It may be undefined if running
       // outside of Vercel
       NEXT_PUBLIC_COMMIT_SHA: CI_COMMIT_SHA,
+      // Protect staging with a password
+      PASSWORD_PROTECT: process.env.NEXT_PUBLIC_ENVIRONMENT === 'staging',
     },
     webpack(config, options) {
       config.resolve.plugins = [

package.json

@@ -28,6 +28,7 @@
     "@sentry/integrations": "6.9.0",
     "@sentry/node": "6.9.0",
     "@storyofams/next-api-decorators": "1.5.5",
+    "@storyofams/next-password-protect": "^1.5.8",
     "@storyofams/react-helpers": "0.3.8",
     "@storyofams/react-ui": "1.2.0",
     "@styled-system/css": "5.1.5",

src/pages/_app.tsx

@@ -1,3 +1,4 @@
+import { withPasswordProtect } from '@storyofams/next-password-protect';
 import { DefaultSeo } from 'next-seo';
 import { AppProps } from 'next/app';
 import { ReactQueryDevtools } from 'react-query/devtools';
@@ -13,15 +14,15 @@ if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
   initSentry();
 }
 
-const MyApp = ({ pageProps, Component }: AppProps) => {
-  return (
-    <Providers pageProps={pageProps}>
-      <CSSreset />
-      <DefaultSeo {...seo} />
-      <Component {...pageProps} />
-      <ReactQueryDevtools initialIsOpen={false} />
-    </Providers>
-  );
-};
+const MyApp = ({ pageProps, Component }: AppProps) => (
+  <Providers pageProps={pageProps}>
+    <CSSreset />
+    <DefaultSeo {...seo} />
+    <Component {...pageProps} />
+    <ReactQueryDevtools initialIsOpen={false} />
+  </Providers>
+);
 
-export default MyApp;
+export default process.env.PASSWORD_PROTECT
+  ? withPasswordProtect(MyApp)
+  : MyApp;

src/pages/api/login.ts

@@ -0,0 +1,5 @@
+import { loginHandler } from '@storyofams/next-password-protect';
+
+export default loginHandler(process.env.STAGING_PASSWORD, {
+  cookieSameSite: 'none',
+});

src/pages/api/passwordCheck.ts

@@ -0,0 +1,3 @@
+import { passwordCheckHandler } from '@storyofams/next-password-protect';
+
+export default passwordCheckHandler(process.env.STAGING_PASSWORD);