amplify-auth-next-storage

Isomorphic cookie storage for Next.js apps using @aws-amplify/auth

Installation

$ npm install amplify-auth-next-storage

Options

new NextStorage(ctx, options)

• ctx is the Next.js ctx object, only required server-side. Pass null or undefined on the client-side.
• options are identical to Amplify's cookieStorage configuration options.

https://aws-amplify.github.io/docs/js/authentication#manual-setup

| Option | Type | Default | Description | | --- | --- | --- | --- | | domain (required) | string | none | Cookies domain | | expires | number | 365 | Cookie expiration in days | | path | string | / | Cookies path | | secure | boolean | true | Cookie secure flag |

Usage

// utils/auth-utils.js

// Placing your configuration into a reusable utility function isn't strictly
// necessary, but makes repeated use of Auth.configure() easier

import Auth from '@aws-amplify/auth';
import NextStorage from 'amplify-auth-next-storage';

export function configurePool(ctx) {
  Auth.configure({
    region: 'us-east-1',
    userPoolId: 'us-east-1_xxxxx',
    userPoolWebClientId: 'xxxxxxxxxxxxxxx',
    storage: new NextStorage(ctx, {
      domain: '.yourdomain.com',
      expires: 365,
      path: '/',
      secure: true,
    }),
  });
}

// pages/_app.js

import React from 'react';
import { configurePool } from 'utils/auth-utils';
import fetch from 'node-fetch';

global.fetch = fetch; // One workaround for getting Auth.configure to work properly server-side

const YourApp = ({ Component, pageProps }) => {
  // Running this once at the app level, client-side, allows you to
  // use `Auth` methods in all of your components 

  configurePool();

  return <Component {...pageProps} />;
};

YourApp.getInitialProps = async (appContext) => {
  const appProps = await App.getInitialProps(appContext);

  // However, we need to configure the pool every time it's needed within getInitialProps

  configurePool(appContext.ctx);

  // ... do stuff with Auth. e.g. Auth.currentUserInfo

  return { ...appProps };
};

export default YourApp;

// components/FancyComponent.js

import React from 'react';
import { configurePool } from 'utils/auth-utils';

const FancyComponent = () => {
  // You can use auth here without configuring the pool since we already
  // configured it at the YourApp level

  Auth.currentUserInfo().then(currentUser => console.log(currentUser));

  return <div>Fancy Component</div>;
}

FancyComponent.getInitialProps = async (ctx) => {
  // If we need Auth in this component server-side, we need to configure the pool again

  configurePool(ctx);

  await Auth.currentUserInfo().then(currentUser => console.log(currentUser));

  return {};
}

Notes

If you're struggling to get Auth.configure to work properly on the server side, one workaround is to use something like node-fetch as the global fetch.

// _app.js

import fetch from 'node-fetch';

global.fetch = fetch;

// ... the rest of your _app.js file