CODEWITHSUNDEEP
authenticationamazon-cognitonuxt.js
Aarjav
Aarjav

Reputation: 1374

How to use nuxt auth module with AWS Cognito ui

I am want to build an app which has a static frontend ( target: 'static' in nuxt.config.js ), and a backend using ktor. The app will need to authenticate users but I do not want to manage passwords and things myself, so I would like to integrate with AWS Cognito. Based on my understanding, I think this is the workflow I want:

  1. User is browsing the site anonymously (no login)
  2. They do some action which requires login or explicitly click on login button.
  3. User gets redirected to AWS Cognito ui for login. They may register for new account, login with their existing, or login using another provider (after configuring cognito for it).
  4. Cognito ui redirects user back to the app ui but with JWT tokens in query params (I think this is just how cognito does it)
  5. The JWT token (s?) get stored in vuex store / nuxt auth
  6. The token is used when making requests to the backend. As well as showing some additional components / actions if the user is authenticated and their basic info like username (part of jwt?)

I think I have cognito and the ktor backend setup correctly but I don't know how to get started for the frontend.

I found this old github issue 195 in the auth module repo, but I believe that's for when the "login form"/ui is part of the nuxt app and client is making use of the cognito api without 'redirect'.

Unfortunately everything in this stack is new for me so any help is appreciated. If there is already a project doing something similar, I look at the code and try to figure it out but right now I'm lost.

update 2020-12-31, mainly so that I can put a bounty on this soon: The live demo at https://auth0.nuxtjs.org/ seems to be doing what i'm looking for but then the github page read me shows something else https://github.com/nuxt/example-auth0. Also i don't see middleware / plugins used anywhere. it's all mostly configured through nuxt config, so it only works for the auth0 custom provider?

Upvotes: 8

Views: 2665

Answers (1)

paulus.dev
paulus.dev

Reputation: 11

I was having the same issue as you:

How do I tell it when to redirect or read the token from query param?

I solved this by configuring auth.redirect.callback to match the endpoint that cognito will callback with the token. I believe this will tell the middleware when to look for a new token in the query param.

nuxt.config.js:

  auth: {
    redirect: {
      callback: '/signin',
      ...
    },
    strategies: {
      awsCognito: {
        redirectUri: "http://localhost:8080/signin",
        ...
      }
    }
  }

And to answer your other questions:

The nuxt auth module guide says to set up middleware, but afaik middleware is only for server side rendered apps.

I tried this setup with ssr: false and it still works fine.

I need to activate the vuex store but I don't know what to put there. Are there some specific things the auth module expects or do I just create an empty file in the directory?

An empty index.js file is fine.

How do I tell it when to redirect or read the token from query param?

See first answer above.

How to parse the JWT token (if it doesn't automatically) and get some payload info like username from it?

From my initial testing I found that the middleware will automatically call the userInfo endpoint when user data is requested e.g. this.$auth.user.email

    strategies: {
      awsCognito: {
        scheme: "oauth2",
        endpoints: {
          userInfo: "https://x.amazoncognito.com/oauth2/userInfo",

ref: https://docs.aws.amazon.com/cognito/latest/developerguide/userinfo-endpoint.html

Does the axios module get configured automatically to make use of this?

Yes.

Upvotes: 1

Related Questions