Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

  • The nuxt auth module guide says to set up middleware, but afaik middleware is only for server side rendered apps.
  • 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?
  • How do I tell it when to redirect or read the token from query param?
  • How to parse the JWT token (if it doesn't automatically) and get some payload info like username from it?
  • Does the axios module get configured automatically to make use of this?

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?

like image 852
Aarjav Avatar asked Oct 18 '20 20:10

Aarjav


People also ask

How does NUXT auth work?

The module authenticates users using a configurable authentication scheme or by using one of the directly supported providers. It provides an API for triggering authentication and accessing resulting user information.

How do I set up authentication in Cognito?

Go to AWS Cognito service and click “Manage Identity Pools”. 2. Enter “Identity pool name”, expand the “Authentication providers” section and select “Cognito” tab. This is where the Cognito authentication provider will be registered with the Identity pool.

Can Cognito be used as authorization?

You can use Amazon Cognito to control permissions for different user groups in your app. This ensures that users have appropriate access to backend resources, determined by the group they belong to. Amazon Cognito makes it easier for you to manage user identities, authentication, and permissions.

What is SRP authentication in Cognito?

Amazon Cognito contains built-in AuthFlow and ChallengeName values so that a standard authentication flow can validate a user name and password through the Secure Remote Password (SRP) protocol.

How do I add authentication to my AWS Cognito app?

To add authentication to your app, you use the AWS Amplify CLI to add the Auth category to your project. Then, in your client code, you use the AWS Amplify libraries to authenticate users with your Amazon Cognito user pool.

What are the OAuth2 endpoints in awscognito?

We're using the built-in OAuth2 scheme and we're calling it awsCognito. The endpoints are: This is the domain/url we've configured in AWS Cognito with /login appended. This loads the login page. This is the domain/url we've configured in AWS Cognito with /oauth2/token appended. This endpoint is used to get the user's tokens.

What is the Amazon Cognito hosted UI?

The Amazon Cognito Hosted UI provides you an OAuth 2.0 compliant authorization server. It includes default implementation of end user flows such as registration and authentication. You can also customize user flows, such as the addition of Multi Factor Authentication (MFA), by changing your user pool configuration.

How do I integrate nestjs with AWS Cognito?

To do that, start by running the following command at the root of your NestJS project: This command will create a file called auth.module.ts inside of src/auth. Then we’ll create a file called auth.config.ts inside of src/auth. This file will hold all the values that we need to communicate with AWS Cognito:


Video Answer


1 Answers

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.

like image 62
paulus.dev Avatar answered Oct 24 '22 01:10

paulus.dev