amplify-auth-next-storage
v1.1.1
Published
Isomorphic cookie storage for Next.js apps using @aws-amplify/auth
Downloads
108
Maintainers
Readme
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. Passnull
orundefined
on the client-side.options
are identical to Amplify'scookieStorage
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