Giter Club home page Giter Club logo

aws-cognito-next's Introduction

aws-cognito-next's People

Contributors

bknights avatar dependabot[bot] avatar dferber90 avatar marceliwac avatar navarroaxel avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

aws-cognito-next's Issues

Fetch new token with refresh token

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 typo in the README

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
              ^^

Invalid hook call

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.

Use Webpack plugin

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

How to access token returned from useAuthRedirect?

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.