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
Related
I have been trying to use react facebook login libraries for social authentication. In a local setup using a ngrok domain its working well but on my remote server where I add my app domain login status becomes cancelled. May someone help me understand where I may be getting it wrong. I have used react-facebook-login, react-social-login, #greatsumini/react-facebook-login - and I seem to be getting the same problem
I've started building a prototype for a front-end layer with single-spa. The layout is very similar to https://github.com/react-microfrontends, which means:
Root config
A navbar (React)
Two apps (Both React)
A Styleguide module
An API module to handle communication with a set of API
I managed to get a basic prototype running, but I now need to implement some OAuth2/OpenID based authentication, and I'm not sure where to start. I need the user redirected to a separate URL (Auth0 style) if not authenticated or not having a valid JWT, then I need a mechanism of token refresh whenever the auth token expires. On top of any general advice on best practices, existing examples and so on, I have some specific questions I can't quite work out.
How can I redirect the user to a different URL when not authenticated? Which of the modules/components should be responsible for it?
Is there a library that implements OAuth2 out of the box? In particular, I'm interested in some sort of automatic token refresh.
What is the best way to make sure an unauthenticated/unauthorized user cannot access the app bundles?
Thanks in advance.
The typical approach would be to set up an Auth microfrontend that would :
handle credenials retrieval upon login. Be it via Password flow or OAuth ( in your case). Since you are using React, your OAuth provider should have a library that you can use within the Auth MFE to interact with it. If it's keycloak, React Keycloak is a good fit. There's no rule lf thumb here.
pass the credentials to your two React Apps ( Microfrontends) and the API module via Browser storage or shared state.
Doing so, the API module would set the credentials in the API calls. and the two react Apps would check credentials presence before proceeding with their inner logic.
refresh credentials on expiration or log out user ( depending on your logic ). Loging the user would mean deleting the credentials from browser storage for example.
redirect to one of your react App after login. That means the Auth MFE route should always be active in the root config.
I hope it helps. Here I have summarised the flow.
More of it on my github account https://github.com/exaucae/single-spa-patterns/blob/master/AUTHENTICATION.md
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
PS
Just note I am pretty new with react(with redux) and express in general.
My question is more of a "what do I do now?" or "help me in the right direction,please" type of question.
My english is very bad.
I am not afraid to teach myself , just show me where to look.
Most internet resources are half explained or assumes you are a pro.
I have a react client side application that needs user authentication, and after the authentication the react application needs to know if client is logged in or out
Now currently my react application is using conditional rendering which means my entire application is depended on the app-level state.
When my react application starts it starts with a login component where the user can add his email and password
Now from here on out I am completely stuck on what to do,so many questions...
How do I authenticate(from the backend) the user using his login input(email/password) and check agiants users in mongoDB if he is there or not, and if he is there how do I let front-end application know he is valid user and use that user information to access certain routes?
How can I check if user is logged in(after authentication and valid user have been authenticated) from front-end react application
Can I use cookies as a possible solution?For example set a cookie on the server-side(express) and access the cookie on the client-side(react) and vice-versa?
Little of topic(or maybe on topic) question? What is Passport.js and it help with my current dilemma ???
as far as authentication is concerned, using a JWT which will be saved in session storage and can be sent to your server app via API is a very popular approach with react/redux applications. this will be sent with all api requests so that the server app can verify that the user is logged in before serving data to them. to check if someone is logged in on the client app, you should have a reducer/saga/thunk that, upon recieving a successful login message from the server app, will update the auth reducer portion of the redux store to flip a boolean isLoggedIn property that you can expose to your props to check if you are logged in.
have a react client side application that needs user authentication, and after the authentication the react application needs to know if client is logged in or out
Now currently my react application is using conditional rendering which means my entire application is depended on the app-level state.
When my react application starts it starts with a login component where the user can add his email and password
there is a react-redux structure called the duck structure that is very good: https://github.com/erikras/ducks-modular-redux
sorry but I do not have mongodb experience but search for authentication handling and there will definitely be examples. .NET Core is excellent and there are many tutorials if you consider changing.
Just wondering if anybody has done this.
What I'm looking for is a full React app with access to API Controllers inside an ASP Core app that uses a layout and Identity, etc.
My reason is that I need Facebook login using .NET Cores Facebook Identity. If I was to separate the front end from the back end completely, when Facebook is authenticating the user, there is no connection between the front end and the route Facebook returns to after authentication is successful. E.G /signin-Facebook or /Account-ExternalLogin.
Thanks in advance.