building happykit.dev
dferber90 / aws-cognito-next Goto Github PK
View Code? Open in Web Editor NEWAuthentication helpers for AWS Cognito in next.js
Home Page: https://aws-cognito-next-example-app.now.sh/
Authentication helpers for AWS Cognito in next.js
Home Page: https://aws-cognito-next-example-app.now.sh/
building happykit.dev
Hi there,
Thank you for creating such a useful library.
I am stuck fetching user attributes because the library cannot get information not provided by a JWT token.
Is there any solution?
Hi there,
I've been trying to find any documentation on refreshing the tokens. How is that currently possible using this library?
Thanks in advance.
There is a small typo in one of the code examples specifying environmental variables (doamin
-> domain
):
IDP_DOMAIN=<doamin>.auth.<region>.amazoncognito.com
^^
should be:
IDP_DOMAIN=<domain>.auth.<region>.amazoncognito.com
^^
I get this error message, using both my own code and yours:
Server Error
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
I've gone through the React troubleshooting page here and not found any duplicates, etc. Seems to be something about the nested components is throwing it off.
I tried to get a screen shot of the error but could not.
thanks.
aws-amplify will soon offer SSR support. Not sure yet what that will mean for this package.
Instead of having a script to prepare the plugins, we could have a Next.js Webpack plugin. This has the benefit of easier integration into Next.js.
The plugin would roughly be this
"use strict";
const write = require("write");
const fetch = require("node-fetch");
const jwkToPem = require("jwk-to-pem");
const region = process.env.AUTH_AWS_COGNITO_REGION;
const userPoolId = process.env.AUTH_AWS_COGNITO_USER_POOL_ID;
const red = (str) => `\x1b[31m${str}\x1b[0m`;
async function fetchJwks() {
const url = `https://cognito-idp.${region}.amazonaws.com/${userPoolId}/.well-known/jwks.json`;
const jwks = await fetch(url)
.then((res) => res.json())
.catch((error) => {
console.error(
red("AwsCognitoPemPlugin"),
`Could not fetch jwks.json from Cognito`
);
console.error(`Tried "${url}", but it does not exist.`);
console.error(``);
console.error(
`Maybe the provided region (${region}) or userPoolId (${userPoolId}) are incorrect?`
);
return process.exit(1);
});
if (jwks.message) {
console.error(red("AwsCognitoPemPlugin"), jwks.message);
return process.exit(1);
}
if (!Array.isArray(jwks.keys) || jwks.keys.length === 0) {
console.error(red("AwsCognitoPemPlugin"), "No keys present in response");
console.log(jwks);
return process.exit(1);
}
return jwks;
}
// map public-keys to pems, so the client/server don't need to do it
// on every request
function mapJwksToPems(jwks) {
return {
...jwks,
keys: jwks.keys.map((key) => ({
...key,
pem: jwkToPem(key),
})),
};
}
module.exports = class AwsCognitoPemPlugin {
constructor(options) {
if (!options) {
throw new Error(
`Please provide 'options' for the AwsCognitoPemPlugin config`
);
}
// these are the webpack options provided by Next.js in
// webpack: (config, options) => {}
// which the callees forward to us
this.options = options;
// cache to avoid fetching multiple times
this.pems = null;
}
apply(compiler) {
// only run on the server to avoid fetching the pems twice (client & server)
if (!this.options.isServer) return;
compiler.hooks.emit.tapPromise(
"AwsCognitoPemPlugin",
async (compilation) => {
if (this.pems) return
const jwks = await fetchJwks();
this.pems = mapJwksToPems(jwks);
write.sync("./pems.json", JSON.stringify(this.pems, null, 2));
}
);
}
};
And it would be used like that
webpack: (config, options) => {
config.plugins.push(new AwsCognitoPemPlugin(options));
return config;
},
The plugin would fetch the JWKs from the Cognito user pool, add a pem
entry to each key and write them out to pems.json
.
You'd also need to provide environment variables, e.g. in .env.local
like this:
AUTH_AWS_COGNITO_REGION="eu-central-1"
AUTH_AWS_COGNITO_USER_POOL_ID="eu-central-1_xxxxx"
The reason we start with AUTH_
is that Vercel and other hosting solutions reserve env vars starting with AWS_
, e.g. Vercel's reserved env vars list
With Next.js 9.4, all env vars starting with NEXT_PUBLIC
are exposed to the browsers automatically, see https://nextjs.org/blog/next-9-4#new-environment-variables-support.
We can use that to simplify the setup. PRs welcome!
Hi, I have implemented authentication following your examples (except in js rather than ts). I want to detect when the user has successfully logged in and from there, call a function which calls my backend api with their access token. However, I am a little confused on how to implement this. You mention this - "Call the useAuthRedirect hook and pass a function as a callback. That function will be called with an idToken as soon as the cookies are ready, or with null when no id_token was contained in the hash.". I was hoping you could please provide an example?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.