We Keep Coding

How to get Azure AD authentication to work in production with msal-browser in my Next.js application?

The following implementation of msal works without issues when I run it on localhost. But when I deploy it to an Azure App Service the clientId and/or tenantID seems to become undefined, even when I tried experimenting with placing the id strings directly into the file. Here is the error I get when i try to click the login button in production:
GET https://login.microsoftonline.com/undefined/v2.0/.well-known/openid-configuration 400 (Bad Request)
Uncaught (in promise) ClientAuthError: endpoints_resolution_error: Error: could not resolve endpoints. Please check network and try again. Detail: ClientAuthError: openid_config_error: Could not retrieve endpoints. Check your authority and verify the .well-known/openid-configuration endpoint returns the required endpoints. Attempted to retrieve endpoints from: https://login.microsoftonline.com/undefined/v2.0/.well-known/openid-configuration
at t [as constructor] (_app-3866deb516d5bf6f9628.js:1)
at new t (_app-3866deb516d5bf6f9628.js:1)
at Function.t.createEndpointDiscoveryIncompleteError (_app-3866deb516d5bf6f9628.js:1)
at Function.<anonymous> (_app-3866deb516d5bf6f9628.js:1)
at _app-3866deb516d5bf6f9628.js:1
at Object.throw (_app-3866deb516d5bf6f9628.js:1)
at s (_app-3866deb516d5bf6f9628.js:1)
And here is the msal implementation:
import * as msal from "#azure/msal-browser";
function redirUri() {
if (process.env.NODE_ENV == "development") {
return "/"
} else {
return "https://somewebsitename.azurewebsites.net/"
}
}
const msalConfig = {
auth: {
clientId: process.env.NEXT_PUBLIC_AZURE_AD_CLIENT_ID,
authority: `https://login.microsoftonline.com/${process.env.NEXT_PUBLIC_AZURE_AD_TENANT_ID}`,
redirectUri: redirUri()
}
};
const msalInstance = new msal.PublicClientApplication(msalConfig);
export { msalInstance }
What is the correct way to do this?

You can't get the app setting in Azure app service configuration.
You can get the ClientID and tenant Id from your application configuration by doing this.
process.env.clientId and process.env.tenantId
Ensure you have configured the following settings on the portal:

msal redirect call back is not getting called in Cordova app

I am creating a mobile app using Cordova version 9. I use msal.js (v1.3.0) library for authentication with Azure AD B2C.
This is my msal configuration for the instance const myMSALObj = new Msal.UserAgentApplication(msalConfig);
const msalConfig = {
auth: {
clientId: "1234",
authority: ''url,
validateAuthority: false,
redirectUri: 'msauth.[budleID]://auth'
},
cache: {
cacheLocation: "localStorage", // This configures where your cache will be stored
storeAuthStateInCookie: false
}
};
From the Cordova application (iOS) on clicking login, Safari browsers open up. After i enter the credentials, I am able to redirect back to the app. but the redirect callback handler myMSALObj.handleRedirectCallback(authRedirectCallBack); is not getting triggered.
How to trigger the handler and whether the redirecturi formate for Cordova app is correct?

Is aws-amplify with auth broken?

I am trying to build a react app which will use the aws hosted ui for authentication. I am trying to use aws-amplify to achieve this, and so far I am having no such luck.
Here the docs state that the auth config should look like this.
const oauth = {
domain : 'your-domain-prefix.auth.us-east-1.amazoncognito.com',
scope : ['phone', 'email', 'profile', 'openid','aws.cognito.signin.user.admin'],
redirectSignIn : 'http://www.example.com/signin/',
redirectSignOut : 'http://www.example.com/signout/',
responseType: 'code',
}
But when I use this config setup I get the following error.
The parameters: App client Id, App web domain, the redirect URL when
you are signed in and the redirect URL when you are signed out are
required.
As you can see, those params are clearly supplied. So I clicked on the source map file linked in my console with the error message, and saw this.
if (data == null || !ClientId || !AppWebDomain || !RedirectUriSignIn || !RedirectUriSignOut) {
throw new Error(this.getCognitoConstants().PARAMETERERROR);
}
Which makes it seem more like the config should look a little something like this.
const auth = {
AppWebDomain: "aaaaa",
TokenScopesArray: ["phone", "email", "profile", "openid", "aws.cognito.signin.user.admin"],
RedirectUriSignIn: "http://localhost:3000",
RedirectUriSignOut: "http://localhost:3000",
responseType: "token",
ClientId: "aaa",
UserPoolId: "aaa",
};
But when doing this, and trying to send the user to the hosted ui as the docs say here I get this error.
Uncaught TypeError: Cannot read property 'domain' of undefined
Once again I looked at the source and found this.
var domain = config.domain,
Which makes it seem like its expecting the config which does not work.
At this point I am really lost and can use any help at all.

Going through the Auth.ts code, it appears that you have to include the userPoolId and userPoolWebClientId fields, in addition to oauth. Here's how I got it to work:
const oauth = {
domain: 'XXXXXX.auth.us-west-2.amazoncognito.com',
scope: ['phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin'],
redirectSignIn: 'http://localhost:3000/',
redirectSignOut: 'http://localhost:3000/',
responseType: 'code'
};
Auth.configure({
oauth: oauth,
region: 'us-west-2',
userPoolId: 'us-west-2_XXXXXXXXX',
userPoolWebClientId: 'XXXXXXXXXXXXXXXXXXXXXXXXXX'
});

auth0 cannot read poperty options of undefined

I try to get auth0 running on a simple react app.
I create a auth0 object with the folling parameter:
this.auth0 = new auth0.WebAuth({
domain: AUTH_CONFIG.domain,
clientID: AUTH_CONFIG.clientId,
redirectUri: AUTH_CONFIG.redirectUri,
audience: `https://${AUTH_CONFIG.domain}/userinfo`,
responseType: AUTH_CONFIG.responseType,
scope: AUTH_CONFIG.scope,
});
after I logg in on the Auth0 website and get redirected to my callback url I get the error
cannot read poperty of undefined
I just cant figer out where this error located.
In my Applcation in auth0 i configured: Allowed Callback URLs: http://localhost:3000/callback

How to integrate Ember.JS and Keycloak SSO system

My question is quite simple : does anybody know how to integrate Ember.JS and Keycloak (the SSO system) ? We currently face a problem using the Keycloak JS Bower library (https://github.com/keycloak/keycloak-js-bower) to redirect users to Keycloak own login page, and to generally integrate Ember.JS with Keycloak. Our problems are :
Double page reload on page reloading,
401 unauthorized HTTP code on login to the Ember App.
Thanks for your (precious) support.

You can use script JS:
Check that you have script in your keycloak: https://yourdoamin.com/auth/js/keycloak.js
If you have, add this code to your login page:
<head>
<script src="https://yourdoamin.com/auth/js/keycloak.js"></script>
<script>
var keycloak = Keycloak({
"realm": "relam_name",
"url": "https://yourdomain.com/auth",
"ssl-required": "external",
"resource": "client_id",
"verify-token-audience": true,
"credentials": {
"secret": "secret_code"
},
"use-resource-role-mappings": true,
"confidential-port": 0,
"policy-enforcer": {},
"onLoad":'login-required',
"clientId": "client_id"
});
var keycloak = Keycloak();
keycloak.init().success(function(authenticated) {
console.log(keycloak);
alert(authenticated ? 'authenticated' : 'not authenticated');
}).error(function() {
alert('failed to initialize');
});
</script>
</head>
In console.log(keycloak); Keycloak return token and other information about user.
More info:
Keycloak JavaScript API to get current logged in user
JavaScript Adapter
MicroProfile JWT Authentication with Keycloak and React

There are a couple ember cli addons that deal with Keycloak and Ember integration:
https://www.npmjs.com/package/ember-cli-keycloak
https://www.npmjs.com/package/ember-keycloak-auth