MSAL + SvelteKit route protection - authentication

I have an application with SvelteKit + MSAL, my authentication page works fine, and authenticate all users without error. My login button is on my main page (http://localhost:3000). The authentication with MSAL works fine, after the authentication, its redirected to the page (http://localhost:3000/home).
I logged out from all my accounts in my browser, and when I tried to access my home page, through http://localhost:3000/home, I could access it without any authentication. I though that could be some error with cache, then I went to another PC, and did the same test and I was able to reach my home page without authentication. I looked for route protection with MSAL, but I couldn't find anything related with MSAL.Not sure if I missed something or any settings on my MSAL.js. I am using MSAL-browser. I want the user to be authenticated in all my routes.
export async function protectedRoute() {
let name = msalInstance.getAccountByHomeId.length;
if (name == 0) {
goto("/");
}
}
This is the code I have tried to use but it didn't work, I was trying to get the lenght of my users logged in, and if it was zero to redirect to the login page. I tried to use the same logic to get the name but its not showing the name of the users on my MSAL instance.
Thanks

Related

Unable to issue redirect for OAuth 2.0 transaction - Auth0 login

I’ve just set up my login with Auth0 using Angular. I have created an application in Auth0 and connected it to a MongoDB database, I have tested this connection and it works fine.
When I click ‘Login’ in my angular application, I am presented with the Auth0 login interface. I entered login details to match credentials in my MongoDB database and was asked by Auth0 if my application could access my details, which I granted. After this, an error page appeared stating ‘Unable to issue redirect for OAuth 2.0 transaction’.
I’ve went back to look at my application settings and the allowed callback URLs, logged-out URLs and web origins have all been entered. I have no idea what could be causing this issue.
here is the context data:
“connection”: “MongoDB”,
“error”: {
“message”: “Unable to issue redirect for OAuth 2.0 transaction”,
“oauthError”: “server_error”,
“type”: “oauth-authorization”

How to redirect to the original path user navigated to after AAD authentication?

I have a pretty straightforward ASP .NET Core web site that uses Azure AD + OpenID for user authentication. Inside Azure I've added "https://my-site/signin-oidc" as a Redirect URI and inside my app settings I've set my CallbackPath to "/signin-oidc".
The problem is after authentication the browser always redirects to the home page.
For example the user will enter the following url into their address bar:
https://my-site/#/foo
They'll then be redirected to the azure sign-in page which has a uri like so:
https://login.microsoftonline.com/.../oauth2/v2.0/authorize?client_id=...&redirect_uri=https%3A%2F%2Fmy-site%3A64199%2Fsignin-oidc&[...]&sso_reload=true#/foo=
(Note where the '#/foo' fragment is placed)
After authentication succeeds they end up at the home page (https://my-site/).
Is there anyway for me to preserve the original URI and redirect the user to it after auth succeeds?
Try using the post_login_redirect_url query parameter for this.
If you want to automatically navigate the user to #/foo' after logging in, you can set your login redirect to ~/.../authorize?post_login_redirect_url=/#/foo.

Problem in Laravel Middleware Auth and Verified Routing using Laravel Fortify "Register Email Verification"

I have successfully configured all the facilities using Laravel Fortify but I have faced a little problem in middleware routing that is I know that When we try to apply email verification we use "Auth" and "Verified" middleware to achieve it. Like...
Route::get('/', function () {
return view('home');
})->middleware(['auth', 'verified']);
It works. But I can't go home page, it redirected me to the login page. When I remove Auth Middleware and try to go home page, it also redirected me to the login page. If I remove Verified Middleware and try to register, it redirected me to the home page with logged-in instead of to go Email Verify Message Page But the email was successfully sent.
How to solve this problem, when an unregistered user goes to the home page and sees Login in Navigation like E-commerce Website and besides that when a user tries to register, the email has to verify and redirect to home page.

Configure Silent Authentication in Open ID Connect

client type: Spa
grant type: implicit or code(pkce)
As a user, I want to be able to get silently authenticated if I have already logged with my identity provider. If not stay on the client side just like a guest user. And if I want to login to the client I should be able to get authenticated manually through the login page.
This has both manual sign-in and automatic sign-in scenarios. How would you handle such cases in Open ID Connect?
By adding the prompt=none in client settings will silently get a new token if user has a valid session. But if not I want the user to be able to manually authenticate through the login page upon his/her wish.
If I set prompt=none this will never have any user interaction such as authentication.
tags: Silent authentication oidc, automatic login, SSO
It is quite a deep subject, and the flow typically works like this:
CLASSIC OIDC SOLUTION
User is redirected for each SPA
If signed in already at the IDP there is no login prompt
OAuth state is stored in local storage (though it is recommended to only store actual tokens in memory)
When an access token expires (or before) do an iframe token renewal with prompt=none
When a new browser tab is opened do an iframe token renewal to get tokens for that tab - to avoid a full redirect
When the user logs out remove OAuth state from local storage
The most widely used library is OIDC Client which will do a lot of the hard work for you. See also my blog post + code sample for how this looks visually.
PROBLEM AREAS
It is worth being aware also that iframe silent renewal does not work by default in the Safari browser in 2020. Some notes on this here.
Alternatively, you can use signinSilent(). I have used it on my login page ngOnInit (since AuthGuard will anyway redirect the user to login, I thought it will be the perfect place in my scenario).
// login.ts
ngOnInit(): void {
this.authService.signinSilent().then(_ => {}).catch(_ => {});
}
// authService
public signinSilent() {
return this.userManager.signinSilent();
}
signinSilent method will return the user object if user already has a valid session with idp. else it will throw an error, probably login_required.

loopback protected routes/ensure login

How do I ensure that a user is logged in before I render a view using loopback?
I can loggin in the front end using my angular app. But I wanted to block anonymous users from viewing the page.
I thought it would be a header, something like headers.authorization_token, but it does not seem to be there.
I am looking for something like connect-ensurelogin for passport, without having to use passport.
This is the $interceptor that solves your problem.
This code detects 401 responses (user not logged in or the access token is expired) from Loopback REST server and redirect the user to the login page:
// Inside app config block
$httpProvider.interceptors.push(function($q, $location) {
return {
responseError: function(rejection) {
if (rejection.status == 401) {
$location.nextAfterLogin = $location.path();
$location.path('/login');
}
return $q.reject(rejection);
}
};
});
And this code will redirect to the requested page once the user is logged in
// In the Login controller
User.login($scope.credentials, function() {
var next = $location.nextAfterLogin || '/';
$location.nextAfterLogin = null;
$location.path(next);
});
Here is one possible approach that has worked for me (details may vary):
Design each of the Pages in your Single Page Angular App to make at one of your REST API calls when the Angular Route is resolved.
Secure all of your REST API Routes using the AccessToken/User/Role/ACL scheme that LoopBack provides.
When no valid Access Token is detected on the REST Server side, pass back a 401 Unauthorized Error.
On the Client Side Data Access, when you detect a 401 on your REST Call, redirect to your Logic Route.
For the smoothest User Experience, whenever you redirect to Login, store the Route the User wanted to access globally
(localStore, $RootScope, etc.) and redirect back there when the User
Logs in and gets a valid Access Token.
Here is the LoopBack Access Control sample: https://github.com/strongloop/loopback-example-access-control