Cannot Authenticate SPA with passport-azure-ad's Bear Strategy - angularjs

Question

So I was playing get Integrating Azure AD into an AngularJS single page app
this tutorial to work.
https://learn.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-devquickstarts-angular-node
It is implemented for the Azure AD v2.0 endpoint, but unfortunately my organization does not support the Azure AD v2.0 endpoint, therefore I replaced the experimental version of adal.js and adal-angular libraries with GA adal.js and adal-angularlibraries. The front-end authentication works perfect. However after I modified the back-end config based on passport-azure-ad. The back-end failed to authenticate the tokens that was implicitly granted.
I have set the allow implicit flow to true in the manifest file. Also I tried to use my client ID and Tenant Name in another example that uses the same angular front end but .NET as the back-end. It worked!
Here is my back-end config
exports.creds = {
// The app id you get from the registration portal
audience: 'http://localhost:8080',
clientID: '**********************************',
// Passport will use this URL to fetch the token validation information from Azure AD
identityMetadata: '************************************',
// Required.
// If you are using the common endpoint, you should either set `validateIssuer` to false, or provide a value for `issuer`.
validateIssuer: true,
// Required.
// Set to true if you use `function(req, token, done)` as the verify callback.
// Set to false if you use `function(req, token)` as the verify callback.
passReqToCallback: false,
// Required if you are using common endpoint and setting `validateIssuer` to true.
// For tenant-specific endpoint, this field is optional, we will use the issuer from the metadata by default.
issuer: '**************************************',
isB2C: false,
// Optional. Default value is false.
// Set to true if you accept access_token whose `aud` claim contains multiple values.
allowMultiAudiencesInToken: false,
// Optional. 'error', 'warn' or 'info'
loggingLevel: 'info'
};
My server:
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
// Pull in the Azure AD bearer passport strategy
var OIDCBearerStrategy = require('passport-azure-ad').BearerStrategy;
// This object is used for in-memory data storage, instead of a database.
// Each time you run the server, you will get a fresh, empty list.
var tasks = [];
// Load passport and configure it to use Azure AD Bearer auth
app.use(passport.initialize());
passport.use(new OIDCBearerStrategy({
identityMetadata: config.creds.identityMetadata,
audience: config.creds.audience,
clientID: config.creds.clientID,
validateIssuer: true,
issuer: config.creds.issuer,
}, function (token, done) {
console.log("yooo");
return done(null, token, null);
}));
var router = express.Router();
router.route('/api/tasks')
.post(passport.authenticate('oauth-bearer', { session: false }), controller)
Here is the output from my browser console after the front-end authenticated:
State: **************
adal.js:973 State status:true
adal.js:973 State is right
Has anybody done similar things?

Answer 1

As mentioned in the comment above by the Author of this question, the audience value in the config should be the client ID.

Answer 2

If anybody have trouble getting it started with Angularjs1 + Nodejs + adal.js v1.x
Here is an working example. Just change the values in the config.js and app.js
https://github.com/lightertu/Azure-ActiveDirectory-V1-Angularjs-Nodejs-SPA-Sample