IdentityServer4 with React - reactjs

I am new to React, and developing a WebApp, which requires authenticating user via IdentityServer. So this is what i 've done so far :
Created a react web app using npx create-react-app.
Created a Security service using Identity server which renders my login page.
Where i am stuck :
Since i am planning to use redux in my react web app, shall i create a reducer/action for the login operation (i am planning to have them for other operations).
How to redirect user to the Authorize/Login page of security service and redirect back to my react app? (Can i use aurelia-oauth or some other plugin ?)
Things i have tried :
Have defined route for login page in react app (which will be discarded, since i am going to use login page of security service.
Tried making a get request for the login url of security service from react app. (Throws : TypeError: Object doesn't support property or method 'render' on react-dom.development.js)

Related

Authentication et logout using Keycloak in React js app

I would like to authenticate my React js application while using the keycloak login page and be able to log out to my application.
I will like to display keycloak login page first and after user authentication it is directed to my react js application and on the application I would like to create a logout button which will redirect the user to the page connection.
You probably would like to have a look at the documentation - I think the javascript adapter might be what you are looking for:
https://www.keycloak.org/docs/latest/securing_apps/index.html#_javascript_adapter

User Authentication and Authorization in React JS App & .NET Web API

Looking for guidance on how to authenticate & authorize users in React App.
We have existing .NET MVC & .NET core web apps from which user will try to navigate to a new app that's being developed using React JS & .NET Core Web API.
When we redirect between apps, we usually pass some user claims like session id/username from the parent app.
So, when an user tries to navigate from an existing MVC app using a button/link click, how to validate the user and redirect to REACT APP HOME PAGE in React App -> startup.cs ?
If user has view permissions to the requested page, system should redirect to the respective page else to display the access denied page.
This React JS app doesn't have any roles based authorization and its based on users permissions settings for each in backend (SQL SERVER).
Please provide your valuable suggestions.

How to get username of user accessing react web app

I'm building a react web app that's going to be used internally. Is there a way to get the user's LAN ID? Similar to using this in .NET System.Security.Principal.WindowsIdentity.GetCurrent().Name
Is there a way to do this in my react home page?

SSO sharing moodle session with react app

I'm very new in moodle, and I'm looking if there is a way to connect an external app as my react js app on moodle
According to a simple SSO architecture, I think I have to share the moodle session cookie with my second app
and then I need one more external API to check on react side, on every page reload if this session still exists or not
can someone helps me pls, or is there any other way to solve this

IdentityServer4 implementation with React SPA and Asp.net Core backend

We have asp.net core(v3.0) Web API backend(no auth yet). A frontend is going to be a SPA(React).
A frontend basically will be an admin panel, it means the website's home page should be just the login page. We are planning on using IdentityServer4 for auth(separate project). If we create the IdentityServer4 project(MVC) it will have its own login form/page. Since opening our client website(react) login form should be opened, popout and iframe is not the way we are considering to use, what is the best way to accomplish this?
I've done some research and it seems it is possible to make our login form in react client and send the users login and password to IdentityServer4 if the client is set as ResourceOwnerPassword flow. But, it is not a secure and recommended way. I've read a lot of questions in SO and a lot of articles, but that is outdated and most of the samples are in IdentityServer4's repo is deprecated.
Questions:
Another way we are thinking is, on home page load, just redirect to the IdentityServer4 login page(MVC) and after login redirects back to our website. Is this a proper way of doing it? will the user see the redirection or it will not be much difference since the user opens our website and it seems like the home page?
What type of GrantType should I use for this case? Hybrid?
Is it possible to make a custom login page like in React?
What is the best way of implementing it?
Thanks for any advice, and my bad if the question is duplicated since I spend a couple of days to figure this out but couldn't.
Edit:
Now, IdentityServer4 with JavaScript client is available in IdneityServer4 official repositoty:https://github.com/IdentityServer/IdentityServer4/tree/master/samples/Quickstarts/4_JavaScriptClient
Also, I cloned and changed a little bit, so IdentityServer4 and WebApi are in a single project: https://github.com/Jamaxack/IdentityServerSPA
Is this a proper way of doing it? will the user see the redirection or it will not be much difference since the user opens our website and it seems like the home page?
That is recommended by redirecting user to identity provider's login page for sign-in , Resource Onwer Flow is not recommended as you said for security reasons.
What type of GrantType should I use for this case? Hybrid?
You can use Proof Key for Code Exchange (PKCE) which is already the official recommendation for native applications and SPAs . See Grant Types for more details .
Is it possible to make a custom login page like in React?
You can fully custmize the identity server's login user interface and identity management system , custmize the IdentityServer4.Quickstart.UI/ASP.NET Identity/Your own identity provider services .
In addition , ASP.NET Core 3.0 or later offers authentication in Single Page Apps (SPAs) using the support for API authorization. ASP.NET Core Identity for authenticating and storing users is combined with IdentityServer for implementing Open ID Connect :
https://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-3.1
1) You can use a flow something like below
'First, load the react project. then check for the token/user object. If there is no token/user, then redirect to the MVC project from react project. You can have the login page in MVC'
2) Use Implicit grant type
3) Yes. You can make customization in MVC login page
4) In order to do that, you can use the oidc-client npm package in react project. For the identity, use the Quickstart template from identity server 4 documentation.
Here it is

Resources