JWT login with Next.js/React using an AWS backend - reactjs

I have a Next.js application that calls AWS functions. I want to add a login functionality to it though using a JWT token. I don't know how to do this. I want to publish the app as a static website so I don't want to have an express server.
I have looked at a whole lot of the solutions which all using a server to handle the JWT stuff. I would like to handle all of the authentication in an AWS Lambda function and then send through a JWT token to the Next.js app. Is this possible?

I would suggest you to have a look at AWS Cognito. Cognito User Pool is user directory with signin, signup, lost password, email verification and MFA flows and API. You can also federate identities from other Identity providers, such as Amazon, Google, Facebook, SAML or any OpenID compatible providers.
To make it easier to provision Cognito and use it in your client-side React App, have a look at the Amplify command line tool and SDK.
Adding Cognito to your project is as easy as : amplify add auth && amplify push
Amplify comes with a builtin user interface to implement the signin and signup flows, but of course you can choose to build your own.
The authentication part of Amplify documentation is available at https://aws-amplify.github.io/docs/js/authentication

Related

aws cognito google social login using react without hosted ui and without amplify

i am trying to integrate google social login to our react application without using hosted UI.
kindly help if some body having code using aws cognito+google social login+react
Thanks in advance
kindly share code link.
You can direct target the Amazon Cognito Authorize endpoint and set identity_provider=Google on the URL.
If you include an identity_provider or idp_identifier parameter in the URL, it silently redirects your user to the sign-in page for that identity provider (IdP).
The OAuth 2.0 REST API endpoints are fully documented under User pool OIDC and hosted UI API endpoints reference

Azure AD integrate with frontend React and backend GoLang

I have a separate structure for backend using GoLang Gin and frontend ReactJS and would like to integrate the Azure AD Oauth2 login.
However, it's ok to authenticate GoLang App or React App, but how to pass the auth info to the backend when I authenticate in frontend using msal-react?
In my current backend API, I use JWT like this to protect APIs:
v1.Use(jwtauth.JWTAuth())
or should I authenticate the backend and pass the info to frontend? but I cannot get it to redirect(Azure login) since they are in different port...
Thanks!
The typical pattern is:
Front-end (React app in your case) uses msal (or other compatible library) to redirect the user to login
Front-end acquires access token for back-end using a scope defined in API app registration (or same app registration)
Front-end attaches access token to back-end requests
Back-end validates access token (signature using public keys from Azure AD, expiry time, audience, issuer, scopes etc.)
In .NET we configure an "authority" for JWT authentication, e.g. "https://login.microsoftonline.com/", and the authentication handler then downloads metadata + public keys from "https://login.microsoftonline.com//.well-known/openid-configuration".
It might be possible to configure something like this for your library as well.
Scopes you typically have to check yourself.

Oauth for authorization JWT for authentication for an app using DRF and cloud functions

I'm building a web app with Wagtail as back-end, running on app engine, cloud functions doing micro-services and triggered via http.
I want to let my users register and authorize using social apps and classic login-password and get a JWT token from Wagtail App. Then, the token will be used to authenticate users both on cloud functions and Wagtail back-end.
How do I provide the user with JWT tokens if he/she authorizes with OAuth?
Is my approach correct? Any suggestions on how this should be done in the proper way?
The best solution I found so far is to use firebase auth. In python I verify token like that:
from firebase_admin import auth
decoded_token = auth.verify_id_token(id_token)
uid = decoded_token['uid']

Access Google IAP protected API from Angular

My application has 2 modules
Spring boot back-end API
Angular front-end (SPA application)
Both were deployed in Google app engine (GAE).
I used Google IAP for authentication. After enabling the IAP is there any way to generate the IAP JWT token for the different users within the organization to authenticate the APIs from the web client.
I tried token generating mechanism using the Service account. But for my scenario, I just want to authenticate and authorize users not service account. I found this reference to enable the web resource access for users, but it is using cookie based authorization. And it is not the recommended way for the application such as angular.
If you're using IAP to protect your backend api, it means your users have a Google Account or an account managed in Cloud Identity.
In your Angular front-end app, you can retrieve JWT token of your user, with Google Sign-In for Websites.
To easily integrate Google Sign-in with Angular, I recommend you to use ng-gapi from Ruben.
Main lines of the workflow :
Angular uses ng-gapi with Google Sign-in behind the scene
Users are authenticated with their Google Account
You're able to retrieve GoogleUser idToken which is a JWT token.
Each HttpRequest could be executed with Authorization: Bearer JWT
IAP will accept request.
To better understand how to use ng-gapi, check this stackblitz Demo made by creator of lib.
I also suggest you theses resources :
My answer on Stackoverflow about Angular stateless authentication workflow. Just skip the Spring Boot JWT part if you're using IAP.
Google Sign-In for Websites official docs.
Note that you need to use the OAuth 2.0 Client ID configured by Identity-Aware Proxy for your app, and add the correct Authorized JavaScript origins.
Yes, You can generate a JWT token using angular-oauth2-oidc.
Get the default IAP Web App client ID and client secret. Use AuthConfig and redirect to your link after credentials are entered; you can capture the token after they are redirected.
This link has all the details:
https://medium.com/#ishmeetsingh/google-auth-integration-with-angular-5-and-angular-oauth2-oidc-ed01b997e1df
You have told that you tried authenticating from service account. Were you able to generate JWT for service account? I am able to capture the JWT token for individual accounts and use it.
Please give more information on how you authenticated from service account.
Thanks,
Bharath

Allow OAuth2 Authentication into Existing AWS Amplify React Application

I have an existing React application that is using AWS Amplify for backend resources, namely Cognito for authentication. Users authenticate through Cognito to access application resources. I have a new use case where the application will be put into an iframe in another application and I need to accept OAuth2 authentication into my application along with the existing authentication. I have been reading up on OAuth2 and the documentation for Amplify Auth using OAuth2 and I'm a bit confused on how to go about doing this. I'm hoping somebody knows of better documentation or information that can point me in the right direction.

Resources