Allow OAuth2 Authentication into Existing AWS Amplify React Application - reactjs

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.

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

Change ReactJS Okta Authentication from OAuth 2.0 to SAML 2.0

I have my ReactJs application and I'm authenticating the users using Okta React SDK (https://github.com/okta/okta-react). This SDK is using OpenID and OAuth 2.0 to authenticate users. Now, I want to change the authentication flow from (OAuth 2.0) to (SAML 2.0) in my react application. So that user would authenticate from Okta using SAML2.0 flow instead of OAuth2.0.
For the backend, I’m using ruby on rails. I have gone through a number of blogs and documents But, looks like I am unable to find a way or examples where I get some help.
Is this possible, what I’m trying to achieve ?.
Looking forward to you guys, I’m really stuck in it.
The usual solution is in 2 layers:
Your React app uses Open Id Connect and you receive tokens with which APIs can be called. The code and tokens involved are JavaScript friendly.
Multiple login types can be supported - if you need to do a SAML login you configure Okta accordingly but do not need to change code in your UIs and APIs. You will want to avoid coding SAML yourself since it is not a web friendly technology.
So the direction should be to point Okta to a SAML identity provider and perform a federated login. If useful my blog post has further info on the general approach.

Methods of Authentication in Go for App Engine

I am building a reservation system in Google App Engine using Go. I need 2 forms of authentication in my program.
Public Form -- form built in Angular that is on our public website. I want my front-end to have some sort of credentials.json file to use when requesting the book and getOpenDates endpoints in my RESTful API running in Go on Google App Engine.
Private Companion App -- protected by username and password that the user supplies in my app built in Flutter. The app is requesting many endpoints in App Engine. I would like to use JWT to authenticate this portion, but I'm not 100% sure JWT is what I need.
I'm not sure if this tutorial on Identity Platform is what I want. I'm very new to App Engine and authentication in general, so I am a bit lost.
Please describe how I could implement these authentication methods in my RESTful API in Go running on Google's App Engine. I think I may be able to implement the username/password method using a tutorial like this but I'm very lost on the 1st form of authentication with just a credentials file as authentication. If I'm going in the complete wrong direction to accomplish what I want please tell me, but what I'm looking for is code or a tutorial describing how to authenticate using these 2 methods. Thanks for any help.
From what I understand, you want to have a golang backend API in App Engine that serves both your web frontend (1.) and your users app (2.).
I am going to suppose that any user with username/password can use both your frontends: the web app and the mobile app with these credentials.
The credentials.jsons are not designed to authenticate users of your services, but rather server to server communication.
With that in mind, I have found the guide Session based authentication in golang, that could help you to set up your backend to accept only authenticated requests over HTTPS. The web browser will automatically save the cookie, however you need to store the cookie in your mobile app.
For much more complicated scenarios for authenticating from different webpages, it is required to use OAuth2 as you can see in this thread. If you don't find any of your requirements listed in here it is probably overkill to use Auth0 nor OAuth2.

MSAL authentication and authorization from React to Web API

I have some trouble understanding the MSAL authentication and authorization. I have a single page app developed in React. I have setup the MSAL Azure SSO authentication by registering the web app on the Azure AD. Now, I have a Web API (in .Net Core) which is running on a separate app service. How do I integrate the authentication from my React app to the Web API?
Few questions coming to mind:
Do I have to register the Web API app as well similar to my React app?
Do I have to pass the auth token from my React App to the Web API?
Do I have to setup the authentication only on the Web API side (using MSAL.Net) and the React App will connect to it?
Please share your thoughts. Let me know if I can explain any better.
If you are the author of both react app and web API, you can register just one app and use ClientId for both.
Yes. If your react app is standalone app (not a part of Asp.net app) you can use msal.js to login with AzureAD and then use openId token to login to your web API. Also you can use access token to access services secured by Azure (e.g. Microsoft Graph) directly from React.
If your React app is a part of Asp.net app, you can setup Auth on server. If it's standalone app you need to use approach from 2.
If your React app is standalone app and if you are going to access "downstream" API (like Microsoft Graph) from Web API, you need to implement On-Behalf-Of mechanism on your Web API. In two words:
- user login with React app and access Web API with openId token;
- Web API acquires new access token based on token sent from client
- Web API access Microsoft Graph with this new access token.
You can find Server side example here.
Client side example from another answer works in this case, but you need to send row openId to Web API instead on access token.
P.S. You can use access token instead of idToken to access your WebAPI as well, but in this case you need to define separate scope for your WebAPI in Azure as well. After that you can use this scope to access your WebAPI and separate set of scopes to access MS Graph.
Here is a complete video tutorial and source code on how to use MSAL with React to call Microsoft Graph.
The only different in your case will be that instead of calling Microsoft Graph, you will call your own API.
Bottomline is - there is no direct integration package yet for react. Which can also be read from the official statement on the msal-js repo:
After our current libraries are up to standards, we will begin
balancing new feature requests, with new platforms such as react and
node.js.
See Here. It allows you to call Graph API from client side.

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

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

Resources