I have a sample react app that uses an identity provider for user auth. I am trying to automate user login with cypress, via the IdP (Okta in this case) API.
With custom cypress command I am able to authorize and retrieve user details and authorization token, but I don't know what to do with that information.
After receiving user details and token if I come back to my app root (which is configured as the callback url), it just tells me I am not authenticated.
I have configured a /profile page that uses a Secure route in React, which should only be accessible when the user is logged in. If I get the token and then visit the /profile url, it still tells me I am not authenticated.
This blog post includes Cypress e2e with Keycloak, Okta, and Auth0. https://developer.okta.com/blog/2022/05/12/ionic-angular-jhipster
Code: https://github.com/oktadev/okta-jhipster-ionic-example/blob/main/ionic-app/cypress/support/commands.ts
JHipster does it a bit differently by leveraging the URLs that Spring Security creates and calling APIs directly. It doesn't do any authentication in Angular, React, or Vue because it's less secure than implementing it on the backend.
Code: https://github.com/jhipster/generator-jhipster/blob/main/generators/cypress/templates/src/test/javascript/cypress/support/oauth2.ts.ejs
Related
we are trying to POC an authentication in our react-app by using the library #auth0/auth0-react.
We are following their documentation: https://github.com/auth0/auth0-react.
We configured everything (domain, clientId, etc.).
We have a login button, that, when clicked, must redirect the user to the Auth0 Universal Login Page, where Auth0 can authenticate them.
But when the login button is clicked, we have an http 404 error https://[my_domain_here]/authorize?client_id=[my_client_id_here]&[other_params_appended_by_auth0]
In the url, we noticed that the Auth0 React SDK appends /authorize to our domain and all the rest.
The problem is that our domain doesn't have an /authorize endpoint. Our authorization endpoint is named differently: /as/authorization.oauth2.
We have no control on this name. It's another team. And they're not ready to change it, because it will affect teams that are already using it.
So my question is, is it possible to tell Auth0 React SDK the authorization endpoint name? example /as/authorization.oauth2 instead of the hardcoded /authorize ?
Thanks in advance.
We want develop few different services (React Apps) with the same users database and Rest API.
Some users might have access to APP 1, some for APP 2, some for both depends on their role.
We decided to go on multiple subdomain apps method.
We want SSO so only one page/app to authenticate all the apps and not a local login component for each app. using JWT mechanism in our backend.
STRUCTURE:
AUTH FLOW:
There are two main problems in this flow which are marked as 1 and 2:
Lets say i go to the login app and log in, getting accestoken from the backend.
How do i deliver the token to app1.company.com? should react login APP redirect with token in url param?
local storage is subdomain scoped.
iframe has problems with Safari.
I don't wanna save jwt in cookies for now because the flask REST can serve non-browser retailed clients.
Lets say the user want to go to app2. if we aren't able to share the token from app1 with iframes or any other method, then this app should be redirected to login and make the process again as app1, which is fine for us.
But is this really the way? if token is invalid anymore and we get Error from backend, should we redirect to the login app in the other subdomain (embed the url we wanna go back to after login success)?
Can i just use 3rd party Open id connect service?
Should i consider microfrontends approcah to make the all the "apps" on the same domain?
How "Attlassian" as an example handles this process?
What am i missing and what is the best way to solve this flow?
Lets say i go to the login app and log in, getting accestoken from the backend. How do i deliver the token to app1.company.com?
It is not a problem that login.company.com delivers the token as a parameter in the URL, because the site can verify the authenticity of the token by verifying the digital signature or with a specific endpoint in the central authentication domain. This is how openid/oauth2 does it using the "implicit" flow, although they also allows to send the token as POST, or use a 2-step flow ("authorization_code" flow)
Lets say the user want to go to app2. if we aren't able to share the token from app1 with iframes or any other method, then this app should be redirected to login and make the process again as app1, which is fine for us. But is this really the way?
You can share the token between domains using an internal iframe, but in your case I would recommend that each domain use its own token.
if token is invalid anymore and we get Error from backend, should we redirect to the login app in the other subdomain (embed the url we wanna go back to after login success)?
Yes, in the number 2) of your drawing, just redirect from app2.company.com to login.company.com and follow the same flow as in 1). You will need some type of cookie on login.company.com to avoid requesting credentials from the user again
Can i just use 3rd party Open id connect service?
Yes, you can use an external OpenIdConnect service, or deploy at login.company.com an OpenIdConnect server like IdentityServer or KeyCloak
Should i consider microfrontends approcah to make the all the "apps" on the same domain?
It is not necessary having a central authentication domain
How "Attlassian" as an example handles this process?
I don't know exactly how Attlassian does it, but currently most web services support OpenIdConnect
In a .NET app I can add authentication and authorization using web.config and/or IIS. I can also use [Authorize (Roles = "RoleABC")] in a MVC app's controller or action. And even extend the AuthorizationAttribute
I'm looking into creating a React app for intranet use, and reading these tutorials (ReactJS and MS), but can't find authentication/authorization details.
Even though the app will be Single Page App, I still would like to authenticate and authorize users for certain options within the app, just like I can do in MVC app.
Is the only option to do that way is creating Blazor app instead?
For authentication and authorization, you should use auth tokens (like JWT). Your backend should create an auth token when a client logs in to the system and sends it to the client. Your server also should send the authenticated user information to the client (react app) so that you can render correct pages according to the user type. For example, you can render the admin page for an admin type of user, and the guest page for a guest type of user. You can save this user data as JSON in Redux. Hence you can access the user data from any component of your react. Also, in your backend, you must restrict the endpoints according to the auth token which is sent by the client. In the backend of my app, I follow the below steps:
Authentication check -> Authorization check -> controller (endpoint) -> result
React isn't opinionated on this, so it's up to you to design the implementation. A basic way to do this is:
Log in and obtain an authorized JWT token from the backend and include the account ID when you sign it
Store the JWT token in localStorage, store the account info in Redux
Conditionally limit routes based on account info (ie. admin group) on the front end
Have every auth-required API call include the JWT token in the x-auth-token header, then on the backend use middleware to check if it's still valid. You can then also decode the account ID in order to check its privileges so that you can limit API access
This may be helpful: https://medium.com/#faizanv/authentication-for-your-react-and-express-application-w-json-web-tokens-923515826e0#5f52
Not sure whether you still need this - I personally feel we should have something bridging the authZ gap between server and client to make it easy. So I spent a few days on a github project for this purpose, here it is: authzyin.
What I tried to do is to leverage policy based authorization from asp.net core - which I think it's very cool - and automatically bring the same definition to the client to use in React via hooks.
For authentication I am using msal.js against AAD - so authN is done on the client and jwt bearer token auth is used for all requests.
It has a client lib and a server lib which can be used together or separately. Of course it might still be lacking some features - please feel free to take it as a reference (contribution is also welcome).
I am trying to protect a react.js spa app with adal login and authenticate with .net core wepApi.
I am able to get JWT from azure invoked by react SPA (using react-adal module) and retrieve basic user information.
Now the joy begins
As most MSFT examples are based on their mvc approach, they have a password to sign token in the webconfig file, which is not accessible for frontend application.
How then I could sign the JWT token using a password without pushing it to the SPA app as that could be read in a web console?
One of my ideas is to initiate login in the SPA, then use a webapi endpoint as a redirect link (and provide a connection id in state field) and then by ajax I could do redirect on the SPA, but still there is no signature on the JWT.
my partial solution at the moment is:
have react-adal used to validate if user is logged-in
when there is no token, then react-adal authenticates, but redirection is on a special page when I am grabbing the token and store it in database. The trick here is: there is a need to change hash to query-string to grab the token serverside (as all after # is not forwarded to web-server), so a simple javascrip that replaces # with ? and redirects to another endpoint.
then redirect to the main application
As the URL is only used for redirects (after adal login ) - that is a typical man-in-the-middle scenario, but gives an ability to generate own token.
I'm trying to find the best way to integrate Auth0 login into a React Native application. The login widget for React Native works perfectly fine, but I'm kind of confused as to how we get the users also logged in on the backend so they can make requests to modify data. The backend is running on Node (Meteor). Do I have to send the id_token to the backend, and login with auth0 there? I'm kind of confused on how to integrate this for both the app and the backend, so that when the user logs into the mobile application, the backend also knows they're logged in.
Whenever the client communicates with the backend, it should send the id_token with the request. On each request, the backend should validate the token (using a jwt library) to verify that the token has a valid signature and has not expired. Once validated, the backend will be able to use the user id embedded within the token to perform any authorization rules or business logic it wishes.
Check out this github project for an example Meteor auth0 backend.