Is there a way to determine if silent login is feasible with adaljs-angular4?

I'm currently utilizing the library [email protected] for an Angular 6 project. I am attempting to achieve the following:

  1. If a silent login (login without requiring user input) with Office365 is achievable, then perform a silent login (using _adalService.login())

  2. If a silent login is not possible, then display a "login" button on a welcome screen.

A silent login would be feasible if I am authenticated to Azure AD / O365 and the cookie is still valid.

In order to determine if a silent login is viable, I tried the following:

try {
  let token = await this._adal.acquireToken(this._config.clientId).toPromise();
  return true;
} catch (e) {
  console.log('acquireToken error', e);
  return false;
}

However, it consistently returns:

User login is required

Yet, calling _adalService.login() successfully performs a silent login.

My query: How can I determine if adaljs can execute a login without requesting user credentials (perhaps by retrieving information from an o365-cookie)?

angulartypescriptazure-active-directoryadal.jsmicrosoft-adal-angular6

Answer №1

If you're wondering about the availability of silent login, consider passing PlatformBehavior.Auto to the PlatformParameters parameter in the AcquireToken function.

The issue arises from adal.js lacking support for the necessary overload, making it impossible to specify the value as extraQueryParameter. While initially considering using the prompt query parameter, it turns out that it doesn't serve the purpose.

Upon closer inspection, it may seem like a dead-end. However, the error message provides a hint.

By examining the source code in adal.js, the message triggers under the following condition:

if (!this._user && !(this.config.extraQueryParameter && this.config.extraQueryParameter.indexOf('login_hint') !== -1)) {
    this.warn('User login is required');
    callback('User login is required', null, 'login required');
    return;
}

According to this resource, the purpose of the login_hint is explained as:

Can be used to pre-fill the username/email address field of the sign in page for the user, if you know their username ahead of time. Often apps will use this parameter during re-authentication, having already extracted the username from a previous sign-in using the preferred_username claim.

These insights are crucial when aiming for silent authentication while identifying the specific user.

To conclude, adding 

'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a66656d6364556263647e3767736f676b63664a6f726b677a6665">[email protected]</a>'
to your config.extraQueryParameter should provide the solution.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The labels for my Angular Material form within the dialogue are not visible and the styling appears incorrect until I begin inputting information

https://i.sstatic.net/njp4A.png Upon opening the dialogue, I noticed that only the phone number, email, name, and location fields were properly styled, while the others were not and the labels weren't displaying. Prior to adding appearence="out ...

angularangular-material

Trouble loading Styled Components in React Typescript with Webpack configuration

Hey there! I'm diving into the world of styled components for the first time, and I'm a bit lost on where I might have slipped up. I've got my webpack all sorted out and my .babelrc file in place. As I was going through the Styled Component ...

reactjstypescriptstyled-components

Setting up a Typescript project with a shared package configuration

Before I begin, there are a few premises to consider: I require a shared package that will be included in three other packages, TypeScript, Only one node modules, Ability for multiplatform usage (Windows / Linux), To utilize dependencies from the shared ...

node.jstypescriptnpmlerna

Obtain numerous variables from a .ts file and bring them into a separate file within Angular 4

I am interested in creating a config.ts file to store the global values of my app. I have been able to use it in this way: module.exports.key = "My key"; However, I need to export multiple values, around 20-30. Is there a more efficient way to do this wi ...

angularvariablesexport

Turn off Typescript compilation in Visual Studio for a webpage

My Angular website (not a computer science project) is integrated into a solution, causing Visual Studio 2019 to generate multiple TypeScript compilation errors while working on other projects within the same solution. You can see examples of these errors ...

angulartypescriptvisual-studio-2019

Vue is encountering difficulties resolving the index.vue file located in the parent directory

Having trouble importing a component from the path folder, I keep encountering an error message stating "Cannot find module './components/layout/Navbar'. Vetur(2307)". This is how I am attempting to import the component: import Navbar from "./c ...

typescriptvue.js

Issue with Angular 7 Universal: components inside are failing to display

I have successfully implemented Angular 7 Universal with dynamic server-side rendering. However, I am facing an issue where dynamic components within the main component being rendered on the server are not rendered themselves. Here is an example of the re ...

javascriptangularserver-side-renderingangular-universalangular7

solution for downloading large files from authenticated endpoint that works across multiple web browsers

I'm currently on the lookout for a solution to download large files (around 2 - 4 GB) from a bearer token protected api endpoint that is compatible with all common browsers including IE 11, Chrome, Firefox, Android Browsers, and Safari. I want it to w ...

asp.netangulartypescriptblobfilesaver.js

Converting Typescript Object Types to Array Types with Tuple Structures

Presently, I have the following: interface Obj { foo: string, bar: number, baz: boolean } The desired outcome is to convert this interface into the tuple format below: [string, number, boolean] Is there a way to achieve this conversion? Up ...

typescripttuples

Launching Angular 7 on github pages

I am facing an issue with my Angular 7 app that features two routes: the main route and the 'article' route. While the app functions perfectly when tested locally, it fails to load the page's css when deployed on GitHub pages. I followed the ...

angulargithub-pagesangular-routingangular7

"Retrieving an element from an array may result in a value of

While going through an array of objects in my Angular component class, I faced a strange issue where the properties kept showing up as undefined. The function responsible for this behavior looks like this: upload(): void { const { fileHandles, related ...

angulartypescript

Here's a way to resolve the issue: ReactDOM.render() - TS2345 error: Cannot assign type '() => Element' to type 'ReactElement' in the argument

After tackling React-Router with Typescript, I encountered a typing issue that has me perplexed. Prior to this, I was using an older version of React and React-Router. But now, after updating to the latest builds using yarn, I'm facing this hurdle. ...

reactjstypescriptreact-router

Developing a feature in Angular 4 where shared components generate new instances with each reload

My dashboard template is based on Core UI, but I have made some modifications to better suit my app. The template consists of modules, with the sidebar menu playing a crucial role in navigation. However, as my app is larger, I utilize the top menu for navi ...

angular

Retrieve the attributes associated with a feature layer to display in a Pop-up Template using ArcGIS Javascript

Is there a way to retrieve all attributes (fields) from a feature layer for a PopupTemplate without explicitly listing them in the fieldInfos object when coding in Angular? .ts const template = { title: "{NAME} in {COUNTY}", cont ...

javascriptangulararcgisarcgis-js-apiarcgis-server

A collection of objects in TypeScript with a reference and the ability to add new objects using the

Recently, I've come across an issue in my code while working with custom objects and arrays of them. I have identified a scenario where the push() method works fine and another where it doesn't. Scenario 1 (working as expected): class MyObject{ ...

arraystypescriptobjectinterface

Encountering issue with POST operation in GraphQL on Angular application integrated with AWS Amplify and DynamoDB

I am in the process of developing a basic Angular application using AWS Amplify with a DynamoDB backend. To handle GraphQL API calls, I utilized the amplify add API command to generate the necessary code. My current objective is to populate a table with ...

angulargraphqlamazon-dynamodbaws-amplify

Ways to input a return value that may be an array depending on the input

I'm struggling to properly type the return value in TypeScript to clear an error. function simplifiedFn( ids: string | string[], ): typeof ids extends string[] ? number[] : number { const idsIsArray = Array.isArray(ids); const idsProvided = idsI ...

typescript

Update the nest-cli.json configuration to ensure that non-TypeScript files are included in the dist directory

I've been searching for a solution for hours now: I'm developing an email service using nestJS and nest mailer. Everything was working fine until I tried to include a template in my emails. These templates are hbs files located in src/mail/templ ...

typescriptcompilationhandlebars.jsnestjsmailer

Challenges in Communication between Angular and Spring Boot on an AWS Load Balancer with SSL Enabled

Utilizing an AWS EKS Cluster, I have successfully established communication between Angular pod and Springboot pod without the need for SSL. However, after attempting to add a new certificate from AWS and accessing the Angular application through an ALB, ...

angularamazon-web-servicesspring-boothttpsssl-certificate

How can I combine my two ngIf conditions into an ngIf else statement?

Having trouble incorporating an *ngIf else with two large <div> elements, as the content seems overwhelming to organize properly while following the documentation. Initially believed that using the same styling for two open text boxes, with one hidd ...

angulartypescriptbootstrap-4angular-ng-if