The flow of my application is that,
User enter the Url and AngularJS Login page is displayed
User click on Login with SAML and calls the Web API endpoint which returns the SAML login URL
AngularJS UI receives the SAML Login URL and redirects the user to the Idp Login screen
User is authenticated from Idp and Idp calls the AssertionUrl
The issue starts here,
If I create an Assertion Url on Web API and validates the request then how the AngularJS UI will know that Login was successful or not?
In the case of MVC and Web Forms, it is pretty straightforward but what should be done in the case of AngularJS/Angular SPA?
Edit 1:
Login Flow
SPA -> API -> SPA -> Idp
(SPA calls API, API generate SAML Request and Returns it to SPA, SPA then is redirected to Idp)
Assertion Flow
Idp -> API ? SPA
(Idp calls the AssertionUrl in the API and API generates the JWT but how it will be sent to SPA?)
In a AngularJS/Angular SPA you have two possible solution to handle the subsequently user session after successfully SAML 2.0 authentication.
Use a cookie like in ASP.NET MVC. Where you have to restrict the cookie to make it secure in a SPA. It require your API and SPA to be on the same domain.
Create a JWT access token after successfully login. Which is handed to the SPA and validated in each API call in the backen API code.
You can create a JWT access token with the ITfoxtec.Identity package. By calling the JwtHandler.CreateToken method https://github.com/ITfoxtec/ITfoxtec.Identity/blob/master/src/Tokens/JwtHandler.cs#L38.
Edit 1
All communication between SPA, IdP and API is either redirect or post through the client browser.
After successful authentication in the assertion flow. The API can redirect to the SPA with the access token in a query or fragment in the URL
In Angular, create a component (Token component) and create a route (like /token) to it like. The route should take route paramteer like /token/{token_id} . The token component gets the token value from the route param and saves in session storage. Before all api calls, the angular interceptor will get the token value from session storage and add as a header
Related
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
I have a web app developed using Create-react-app
I host it on IIS, the IIS only response to load the app, there is no server side logic on it (no Express or any other web server)
The app is using a RESTful API on the same IIS, it is out of my control (I cannot make change).
Now one of my client request to add SAML SSO to our app.
I would like to know:
in normal situation, which one is the Service Provider? My IIS Web server? or the API service?
For my case, I cannot implement SAML to API service, my web service only used to load my app without server side logic, how can I implement SAML?
Could any one give me some React implement SAML SSO tutorial or article for reference?
Thanks for any help, any information or suggestion are welcome!
in normal situation, which one is the Service Provider? My IIS Web server? or the API service?
I assume the client wants to authenticate the users using their internal IdP. So your application is the SP. But you will have to define different token service (details below).
With SPA (a single-page-applications) I see the problem, in SAML the user is redirected or posted away from the SAML request and SAML response.
I have a login page to enter id/pw, post them to API server Login endpoint to authenticate and get back a JWT token. After that we use that token in API calls for authentication
The API services are using a JWT token issued based on the provided username/password. I'd recommend to extend the token service (or use a different service) to issue a JWT token based on the provided SAML response - a token swap service. In many OAuth implementations it's called SAML grant type.
I cannot implement SAML to API service, my web service only used to load my app without server side logic, how can I implement SAML?
Usually after the authentication the user is redirected or posted to the SAML ACS endpoint URL, where the server can create sort of session (cookie, parameters, token, ..) and the user is redirected to a URL returned the web page with the session information.
If you are using an SPA, you could use a popup window or SAML with redirect (not with post), where the page could read the SAML response parameters (assertion, signature, ..) and use them in the token swap service mentioned above.
When processing the SAML response, try to use some mature, known, out-of-box libraries, it's a security service and not doing it properly may cause security weaknesses. But you need to do that on the server side, as at the end you need the JWT token consumed by the APIs.
We implemented Auth0 as Service Provider, like this url
In React we are using this library.
After login success, in the react app we are receiving a POST with the SAML response, instead of POST redirect with code and state params, that the library uses to authenticate the user.
So my question is, The React app should handle the SAML response? if so, it's needed a node server to do this.
The Auth0 should handle the SAML response and redirect to the application with the above params? what configuration it's left to implement.
SPA uses OpenID Connect and that should return the code etc.
However, the Auth0 example is for SAML.
You should configure an Auth0 OpenID Connect connector instead.
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 am new to this and I don't know if I am doing this right...
I am using node.js with express to generate auth tokens for a custom Oauth service that Firebase does not support(Steam).
From my frontend a Angular app I redirect the user to the /login get route on my express server and the user is then redirected to the oauth provider page to complete registration.
Upon completion the user gets back to my express server where I compute the firebase token and then send it to the frontend as a cookie and then redirect the user back to the frontend where I complete the sigin process using the token in the cookie.
Am I doing this right? If not can you please quide me in the right direction...thank you.