amplify-auth-next-storage

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

$3

$ npm install amplify-auth-next-storage

$3

``js
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 |

$3

`js
// 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 ;
};

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

Fancy Component

;
}

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 {};
}
`

$3

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.

`js
// _app.js

import fetch from 'node-fetch';

global.fetch = fetch;

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