I am working on a React + Laravel project using Laravel Sanctum for API authentication. When I log in, Laravel Sanctum provides a token that I store in the LocalStorage, and then during every API call I am passing the token in the header to fetch data from the server as the authenticated user.
I am trying to not to show the login page to the already logged-in users.
The way I am doing this right now it by sending the token to the backend to check if the user is authorized or not, but it takes time to get response from the server. So when I hit the login route it shows me the login page first then when response comes back, it redirects me to the home page or another page. That is the thing I am trying to avoid.
Is there a way can I prevent unauthorized users to go to the authorized page as soon as I hit the route?
Related
Has anyone of you seen any example or documents how to do AD Authentication in React.js Application that does not use any Login buttons when User is all ready Authenticated?
I have look many Authentication samples like Microsoft's https://learn.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-react has but everyone of them has a Sign-in and Sing-out Buttons not automatic Authentication and redirect if User has all ready logged in and Authenticated. I mean something like SSO style AD Authentication that is usually wanted to Customer's Web Applications. I use MSAL packages.
Any help valued.
Thanks
You can use the localStorage or cookies to store the localStorage or cookies to store the token, and when you reload the application then you can check if the token is valid and available in localStorage or Cookies, if it is then redirect the user to the home page otherwise redirect the user to the login page.
In the MSAL browser, acquireTokenSilent get's refresh token on every call to the token end point. The very first refresh token has a duration of 1 hour. Subsequent refresh tokens all have reduced (the remaining) expiry time.
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
I have a SPA using Express, Passport.js, and React. I'm trying to add Sign In With Google using Oauth2. I'm trying to fetch the sign-in route, return the user back to fetch, and then update the redux store with the user. The problem I'm running into is that Oauth redirects to a callback, and I can't send the user back to the original fetch call. The Oauth redirect is taking me out of the SPA flow.
If it's impossible to respond to fetch after a redirect, what would be the best way to send the user to the front-end to update the redux store? Do I need Next.js? Thanks.
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.
We have WebAPI2, Thinktecture IdentityServer and AngularJS applications hosted on IIS. Our plan is to set up the webapi2 application stateless. Here is the flow:
Users open our AngularJS application. If not logged in, they get redirected to the login page.
Users enter their credentials, and click login. The credentials get sent to the STS server. If they get authenticated, a JWT gets returned.
AngularJS saves the JWT in the localstorage
To access resources on the WebAPI, angularjs application attaches the JWT on every request.
Before attaching the JWT, it checks the JWT's expiration date. If it hasn't expired, request sent to the API; else, redirected to the login page.
We want the session to be be valid only for 30 minutes. As and when the user does something on the application, the token should slide the expiration datetime. The easiest solution could be enabling sessions for the WebAPI application, but we don't want that. Also, we don't want to get a token before every WebAPI call.
Could we implement sliding sessions/tokens in this scenario? If so, how?