I need your guidance/suggestion on the scenario I am into.
We have a legacy GWT application(version 2.7), this application has 2 controllers which implement EntryPoint class - LoginController and OTSController. These have their respective presenter and viewer.
N.B. - this GWT application runs as a spring-boot application.
This GWT application is a ui application(and there is another spring-boot application which would act as a server app). The GWT app uses default way of handling user authentication i.e. using /j_spring_security_check.
Now I am trying to re-write the Login functionality in React(and I am quite new with React). I am trying to use oauth2 for authentication, can you please point which oauth2 library I should use and is their any sample which I can look into.
I have searched for authentication for React web-app and seen examples for -
Okta Sign-In Widget
Auth0 - provides authentication-as-a-service
Stormpath React SDK
JWT(JSON Web Token)
But couldn't find any specific js library that gives oauth2 implementation(and which doesn't have much strict license obligations) that I can use in my react app, please give me pointers so I can use any existing/implement oauth2 authentication for my Login page(using react).
Thanks,
Saurabh.
You can use these two libraries from Okta for integrating authentication into a React app with Okta - #okta/okta-auth-js and #okta/okta-react. You can also checkout the guide here - https://developer.okta.com/code/react/okta_react. Hope this helps.
Related
I recently found next-auth for authenticating nextjs applications. For authentication of my foobar next js application I use providers like google, facebook, twitter or etc provided by next-auth and it is ok but one thing that I want to know is how to authenticate using same providers - google, facebook, twitter or etc- on other applications?
As an example my foobar nextjs web application has Google sign in and Facebook sign in. If I want to develop mobile application using react native or flutter how to handle Google sign in or Facebook sign in to be authenticated by next-auth api endpoints?
NextAuth is specifically built for next.js applications. If you want your users to sign-in with OAuth providers like Google, Facebook, etc. in your react native or flutter applications, you'd have to use another oauth solution.
This is a very common thing to do though and those providers might even have SDK's or tutorials in their docs.
For example, a quick google resulted in the following promising looking alternatives:
react native - https://github.com/FormidableLabs/react-native-app-auth
flutter - https://fusionauth.io/blog/2020/11/23/securing-flutter-oauth/ (using AppAuth)
We are in the process of setting up a project that requires mobile and web app authentication and were wondering if there are any best practices for implementation.
For the backend we are currently using django rest framework with a knox token authentication and for the web frontend react.js. For the future, there will be a mobile app in react native.
We want to set up the authentication now so that it supports the react native mobile app in the future. However, I have seen that Knox authentication does not work for mobile apps straight forward as it uses csrf token.
So I'm wondering if there are any best-practices for mobile app and web authentication that specifically feature good documentation, multi-device login and smooth extensibility of login options (fb, google etc) for the current setup drf and react.js/react native.
I'm grateful for any guiding hints.
AWS Cognito seems to be a solution to your problem:
Typically, your users get tokens via an external UI provided by amazon (not really customizable) or by calling the Auth API within your React UI.
Cognito sends access_token, id_token and refresh_token to your react app. You need to pass the access_token to your drf backend (similar to knox token authentication) and validate it again via amazon.
Check out the official docs for React, check out this tutorial for django (it helped me a lot!).
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.
Are there any examples on how to implement Azure AD with React web application the example I see include .net core examples only. Mine is pure React web application. Any suggestions?
it is ok to bundle the tenantid and clientid/application inside the react web application? would that have any security implications
We implemented similar structure as follows:
There is a webappservice, which is created from standart web application template. It handles all the authentication parts. Once user is authenticated, the web application service, serves react files with proper parameters (e.g. logged in, user token etc)
I have single page app and service stack as service on different domain name (cors). what is correct way to authenticate angular spa app?
TechStacks is an example of an AngularJS App that supports Twitter and Facebook Authentication.
Another minimal example of a Single Page App that has a number of different AuthProviders enabled is AWS Auth, whilst the HttpBenchmarks example provides good documentation walking through setting up Authentication + Registration in ServiceStack.