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.
Related
We currently have a website that is setup to use SSO through Azure AD. it is configured to with SAML.
Yet, we have third application that needs to connect to this website using specific email and password.
This application can do any default connection that POSTMAN can do.
What I do notice is that web all cookies are removed from the browser. the website allows me to enter
the email address and password.
I am trying to configure POSTMAN to test login to this website. And using the POSTMAN configuration i will be able to configure the application.
Any Guidance is greatly appreciated. Thank you!
I have try configuring post using HTTPS POST BASIC Authentication. Not sure if this correct manner as I am not postman expert nor have attempted such authentication method before.
Our expectation is the POSTMAN could login into the website and create a cookie that has an active session.
Postman is not a browser so it doesn't "log in". The authentication in Postman is related to webservice calls. So imagine you have an online shop and you expose your API to a third party (let's say a sponsor or partner). For example you let another site (the partner/sponsor) add items for your common client from his site (instead of him having to logout of that site then login to your site, it's easier and your partnership makes both sites profitable, let's say for our example - so their site would be more like a sort of forwarder - when the user adds an item on the partner's site, they actually add it in the cart on your site).
In our example, they would call your API (for example, adding an item in the cart). The question is, how do they do that? How do you stop abuse from a malicious user? Simple: you add authentication. So what your (theoretical) shop's partner does is use some auth method (as you said, Basic Auth) to call the endpoint that results into adding an item into the cart for purchase.
But this auth is not what the client uses to log in to your partner or your site. It's an internal auth, like a sort of a "technical" user. And what you would do in Postman is simulate that call and the Postman login would be to allow it to call endpoints.
If, on the other hand, you have a separate login call that this is all it does, logging in, then yes, you can use Postman to login, BUT, keep in mind that the login auth info would not AND SHOULD NOT be the same as the API call login info. So you would still use an auth to allow the API call and a (hopefully different) auth for the actual login url as params.
In other words, Postman auth in any POST or GET call is just a way to tell the remote server they can trust you because you identify yourself. A login window like the Microsoft one is one for user accounts which is something totally different.
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
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).
It is not a duplicate question. I have tried all the methods suggested and nothing really works.
I have configured an FB application and added
(i)An app domain, http://sample.io
(ii)Site URL : http://sample.io/
Also under Facebook Login,
Valid Oauth redirect URIs:
http://sample.io/
Note: It was working before previously for sub domains also.
In application we support multi tenancy so the site url will go as,
http://johndoe.sample.io/
http://obama.sample.io/
Issue: Login Button does not apepar until we add these app domains in the App Domains Field also in Valid Oauth redirect URIs
Question:
Is there a way to fix this? or an API to add subdomains through code?