Msal.js 2.2 PKCE Authorization Flow Refresh Token Missing - azure-active-directory

I am using Msal.js 2.2 (#azure/msal-browser 2.2.0) for PKCE Authorization Code flow, ID and Access tokens are present but no refresh token. Did I miss out anything?
this.msalConfig = {
auth: {
clientId: this.clientid,
authority: this.authority, //https://login.microsoftonline.com/{tenantid}
navigateToLoginRequestUrl: true
},
cache: {
cacheLocation: "sessionStorage",
storeAuthStateInCookie: false,
}
};
this.msalApp = new PublicClientApplication(this.msalConfig);

Try to set offline_access in scopes:
scopes: ["openid", "profile", "offline_access", "User.Read"]

Related

MSAL + Capacitor integration React

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.

Unable to redirect back even after successful login using Okta widget

I am using Okta Sign In widget for authentication but even after successful login there is no redirection instead it keeps loading for unlimited time
these are my configs:
oidc: {
url: 'https://{yourOktaDomain}',
issuer: 'https://{yourOktaDomain}/oauth2/default',
redirectUri: `${window.location.origin}/implicit/callback`,
clientId: `{clientId}`,
scopes: ['openid', 'profile', 'email'],
pkce: true
},
postLogoutRedirectUri: `${window.location.origin}/login`
and these are widget initialization:
const { issuer, clientId, redirectUri, scopes, url } = config.oidc;
const widget = new OktaSignIn({
baseUrl: url,
clientId,
redirectUri,
logo: '/react.svg',
i18n: {
en: {
'primaryauth.title': 'Sign in using Okta',
},
},
authParams: {
issuer,
scopes,
},
});
I have already added trusted origin in Okta Console:
Trusted origins image
Also, already added Redirection URIs in Okta Application:
Redirection URIs image

Login through AAD (Azure Active Directory) in React app doesn't working

I'm trying to implement an authentication through Azure Active Directory for React app.
When I run my application, after login I get a blank page.
In the console I see:
"[HMR] Waiting for update signal from WDS..."
This is my provider:
export const authProvider = new MsalAuthProvider(
{
auth: {
authority: "https://login.microsoftonline.com/common",
clientId: "********-****-****-****-************",
postLogoutRedirectUri: window.location.origin,
redirectUri: window.location.origin,
knownAuthorities: [],
navigateToLoginRequestUrl: true,
},
cache: {
cacheLocation: 'sessionStorage',
storeAuthStateInCookie: true,
},
},
{
scopes: [
'user.read',
'api://********-****-****-****-************/Read'
]
},
{
loginType: LoginType.Redirect,
tokenRefreshUri: window.location.origin + '/auth.html'
}
);
package: react-aad-msal
In Azure: I have an app registeration, with SPA platform. Redirect URI: http://localhost:3000.
Anyone has ideas?
I tried many things, and read about it but with no result.
Thanks in advance!
(Moving from comments to answer so that others may more easily find it)
The issue is resolved for the customer by changing the authority URL from Common to specifying single TenantID.

Redirect loop on authentication after token expiry using react-aad-msal

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.

Migration auth0 from v7 to v9

I’m doing migration from v7 to v9 of Auth0, I didn’t use redirectUri with old version.
I had this code for login:
const auth0 = new Auth0({
clientID: CLIENT_ID,
domain: CLIENT_DOMAIN,
responseType: 'token'
});
withPromise(auth0.login.bind(auth0), {
connection: 'db',
sso: false,
responseType: 'token'
username: authCreds.email.trim(),
password: authCreds.password.trim()
});
and I rewrite it to:
const webAuth = new Auth0.WebAuth({
clientID: CLIENT_ID,
domain: CLIENT_DOMAIN,
responseType: 'token id_token',
redirectUri: ''
});
withPromise(webAuth.login.bind(webAuth), {
realm: 'db',
username: authCreds.email.trim(),
password: authCreds.password.trim(),
sso: false,
redirect: false
});
but now after login it is redirecting to https://include-staging.auth0.com/authorize?client_id=…
with error:
Oops!, something went wrong
server_error: Unable to issue redirect for OAuth 2.0 transaction
I do not need to use callback
They wrote a guide for migrating from v7 to v9.
Personally, I'm pretty frustrated. Seems like they had poorly designed their service and now customers are paying the price.

Resources