export const msalConfig = {
auth: {
clientId: process.env.REACT_APP_B2C_CLIENT_ID, // This is the ONLY mandatory field that you need to supply.
authority: b2cPolicies.authorities.signIn.authority, // Choose SUSI as your default authority.
knownAuthorities: [b2cPolicies.authorityDomain], // Mark your B2C tenant's domain as trusted.
redirectUri: '/home', // You must register this URI on Azure Portal/App Registration. Defaults to window.location.origin
postLogoutRedirectUri: "/", // Indicates the page to navigate after logout.
navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response.
}}
This is the msalConfig.
When I input browser's address bar '/dashboard', and I met MSAL signin screen.
After the success of authentication I only navigate to '/home' route as defined in configuration.
I want to navigate '/dashboard' (the input url, not fixed configuration url) after success of authentication.
How can I change the msalConfig for that?
Please help me.
You probably need to set 'navigateToLoginRequestUrl : true'.
It should redirect to the page (post authentication) that initiated the request.
Related
I'm trying to integrate MSAL authentication in my app but i can't find a solution to solve the redirectUri value.
This is my config file:
export const msalConfig = {
auth: {
clientId: bundle id,
authority: https://login.microsoftonline.com/{your tenant ID})
redirectUri: ???,
},
cache: {
cacheLocation: 'sessionStorage', // This configures where your cache will be stored
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
},
};
The app, being a web app, when used on iOS has capacitor://localhost as link so I don't know how to configure it on Azure AD portal.Tried to put capacitor://localhostas redirectUri and different approaches that i found on internet but none of them work.
Redirect URL should follow the format msauth.[Your_Bundle_Id]://auth. For more information take a look to MSAL redirect URI format requirements.
I'm using MSAL JS in order to authenticate users in react application developed using REACT. Sometimes login works perfectly, redirecting users to the home page of the app. Other times login popup opens, users insert their login but then login procedure fails with this error:
hash_empty_error: Hash value cannot be processed because it is empty.
Please verify that your redirectUri is not clearing the hash.
I know this issue was raised before but never seen proper solution how to overcome this error
What worked for me was to set the redirectUri to a blank page or a page that does not implement MSAL. If your application is only using popup and silent APIs you can set this on the PublicClientApplication config like below:
export const msalConfig = {
auth: {
clientId: process.env.REACT_APP_CLIENTID,
authority: `https://login.microsoftonline.com/${process.env.REACT_APP_TENANTID}`,
redirectUri: 'http://localhost:3000/blank.html'
},
cache: {
cacheLocation: "localStorage"
}
}
If your application also needs to support redirect APIs you can set the redirectUri on a per request basis:
msalInstance.loginPopup({
redirectUri: "http://localhost:3000/blank.html"
})
I've attempted to replace ADAL with MSAL. The first time the user accesses the app it authenticates correctly, but I am getting into a situation where our app goes into a redirect loop after a period of time. I presume this is when the token expires (1 hour by default, I believe). This happens sometimes when the app is idle after an hour, which is why I think it may be to do with the way a new token is obtained as well as when I refresh the browser window.
** AuthProvider.ts **
import { Configuration } from 'msal
// Msal Configurations
const config = {
auth: {
authority: 'https://login.microsoftonline.com/' + process.env.REACT_APP_AAD_TENANT,
clientId: process.env.REACT_APP_AAD_CLIENT_ID,
postLogoutRedirectUri: window.location.origin,
redirectUri: window.location.origin,
validateAuthority: true,
navigateToLoginRequestUrl: false,
},
cache: {
cacheLocation: 'sessionStorage', // This configures where your cache will be stored
storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
},
} as Configuration
// Authentication Parameters
const authenticationParameters = {
scopes: ['openid', 'api://' + process.env.REACT_APP_AAD_SCOPES],
}
// Options
const options = {
loginType: LoginType.Redirect,
tokenRefreshUri: window.location.origin + '/auth.html',
}
export const authProvider = new MsalAuthProvider(config, authenticationParameters, options)
then when calling our api, I thought I could call the getAccessToken method like below and I would silently receive a valid token, but I just end up in a redirect loop.
I'm wondering why it works the first time the user accesses the app, but not when trying to refresh the token. I would think the Azure config is correct, since it works the first time. Could it be an iframe / browser issue or is it a code problem?
[![IdResponse tokenType undefined][1]][1]
[1]: https://i.stack.imgur.com/6Vkwn.png
To Acquire a valid token using refresh token you need to call msal.js token API acquireTokenSilent. For more information on how to get acquire a token using msal.js refer this document.
You can refer the msal.js sample for your scenario.
Question / Issue
I'm using Identity Server for Single Sign On, my Client application is in ReactJs embedded with Redux. I'm using redux-oidc npm node module to implement the Identity Server functionality as mentioned in https://github.com/IdentityModel/oidc-client-js/wiki
My oidc config is
var settings = {
authority: 'https://localhost:2025/core',
client_id: 'TVA',
silent_redirect_uri: 'http://localhost:3000/silent-renew.html',
post_logout_redirect_uri: 'http://localhost:3000',
redirect_uri: `http://localhost:3000/callback`,
response_type: 'id_token token',
scope: 'openid payroll',
acr_values: `tenant:Payroll`,
accessTokenExpiringNotificationTime: 4,
automaticSilentRenew: true,
filterProtocolClaims: true
};
If I use the in-built method signoutRedirect, its again redirecting to the application's initial landing page, but if I directly trigger the end session it redirects to the Identity Server Login Page (i.e., Once the application is successfully logout, the Identity Server redirects to the root URI and then it redirects to the Login page).
Issue: Its not Signout the application
userManager.signoutRedirect()
.catch(function (error) {
console.error('error while signing out user', error);
});
Fine: Signout's perfectly
const path = 'https://localhost:2025/core/connect/endsession?id_token_hint=${token}&post_logout_redirect_uri=http://localhost:3000';
document.location.href = path;
Kindly assist me how to signout using userManager.signoutRedirect() ???
So I am using Stamplay facebook login. But it looks like I can not change the redirect URI. So after successfully login on facebook end, it redirect to this URI:
https://actorreels.stamplayapp.com/?jwt=[token]#/_=_
This will trigger my main route instead of the admin route - where I want user to land after login. Here is my stateProvider setting:
$stateProvider
.state('people', {
url: '/:nameUrl',
templateUrl: 'app/frontend/page.tmpl.html',
params: {
nameUrl: {squash: true},
},
controller: "PageController",
controllerAs: 'vm'
})
.state('admin', {
url:'/admin/:userId',
templateUrl:'app/frontend/admin/admin.html',
controller:'AdminController',
controllerAs: 'admin'
})
As you see, the return URI will trigger people route with nameUrl = "=". I want user to go to admin route instead with jwt as JSON token. How can I do that?
I understand there is $urlRouterProvider.when() I can use to make "/?jwt=" into my admin route. But I do not know how to do that (either in Regex or function...). Could someone help me to figure this out? Greatly appreciated!
You can change the redirect URI for Stamplay inside the editor.
First go to the editor inside the USERS > AUTHENTICATION.
Here you will see icons for all the social logins.
On the far right, you can select the cog icon to manage setting for your login flow. Here you can changed the redirect URI for login, and logout.
Note that for your angular application, include the route beginning with the #. For example. https://mystamplayapp.stamplayapp.com/ is the base url, so your need to enter #/route inside the editor to go to the "route" route.