Using the Capacitor plugin for Firebase Auth, log in to Azure AD B2C with Ionic/Angular

I have been trying to authenticate with Microsoft using a Capacitor plugin, but I haven't had any success so far.

I carefully followed the instructions in this documentation and made sure everything is well configured.

Could you please guide me on where to set this up?

It's important to register the *.firebaseapp.com domain as the redirect domain when registering apps with these providers.

Error

I'm encountering an error stating that the auth credential is malformed or has expired. The OAuth2 redirect URI being used is https://my-app-123a2.firebaseapp.com/__/auth/handler, with the response indicating "invalid_request" from microsoft.com.

Just to provide some context, this issue is occurring within an Ionic/Angular Native app running on an Android device.

Answer №1

The solution to this issue can be found in the GitHub thread linked here: https://github.com/username/repo/issues/12345#comment-543210987

Remember to specify Web as the platform for your redirect URI while setting up a Microsoft OAuth client.

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

Exploring Angular14: A guide to efficiently looping through the controls of strictly typed FormGroups

Currently, I am working on upgrading my formGroups to be strictly typed in Angular v14. Within my FormGroup, there is a specific block of logic that iterates through all the controls and performs an action (this part is not crucial as I am facing issues be ...

javascript angular typescript

Conceal Columns in DevExtreme with Angular2 EditMode

Is there a way to conceal a DataGrid Column while in EditMode by utilizing DevExtreme and Angular2? <h3>Test</h3> <dx-data-grid id="gridContainer" [dataSource]="xxx" [allowColumnReordering]="true" [allowColumnResizing]="true" [rowAltern ...

angular grid devextreme dx-data-grid

Keep track of the input values by storing them in an array after they are

Creating an Angular application to read barcodes. barcode-scanner.component.html <form #f="ngForm" class="mt-3 text-center" id="myform" (ngSubmit)="onSubmit(f)"> <div class="text-center"> <input type="text" maxlength= ...

angular typescript api

Ways to modify the appearance of the button within ion-calendar

Looking to customize the styling of ion-calendar classes Attempting to add styles to the ion-calendar-month class, but not seeing any changes take effect. ...

javascript css angular ionic5

What causes old data to linger in component and how to effectively clear it out

Fetching data from NGXS state involves multiple steps. First, we define the state with a default list and loading indicator: @State<CollectionsStateModel>({ name: 'collections', defaults: { collectionList: [], (...), isListLoading: true, ...

javascript angular ngxs

Develop a cutting-edge Drag and Drop Functionality using the innovative Material CDK

Here is a unique link you can check out: https://stackblitz.com/angular/nabbkobrxrn?file=src/app/cdk-drag-drop-enter-predicate-example.ts. In this example, I have specific goals: I want to be able to select only one number from the "Available numbers" l ...

angular angular-material drag-and-drop web-frontend angular-cdk

Sending returned values from a promise to the calling function in Angular

I have a created a promise to retrieve values from a service and then assign them to variables trans and confidence, which should be used as transcript and conf in the save_data function. How can I return these values to the calling function and ensure tha ...

angular typescript promise

Angular 7: Polyfill required for npm package to support 'Class'

I am encountering an issue where my Angular 7-based app is not functioning in Internet Explorer 11. The npm package I am using begins in index.js: class PackageClass { // code } While the app works as intended in other browsers, it fails to open in ...

angular typescript internet-explorer-11 polyfills

What is the process for unit testing the 'navigate' function in Angular that includes query parameters?

Below is the code snippet from my component: editThis(id) { this.router.navigate(['/categories/edit'], { queryParams: { id: id } }); } The following represents my unit test-case: fit('should call navigate with correct parameters&ap ...

angular unit-testing karma-jasmine

Discovering the country associated with a country code using ngx-intl-tel-input

In my application, I am trying to implement a phone number field using this StackBlitz link. However, I have observed that it is not possible to search for a country by typing the country code (e.g., +231) in the country search dropdown. When I type a coun ...

javascript angular typescript ngx-international-phone-number

Potential solution for communication issue between Angular CLI and Flask due to cross-origin error

Initially, the user id and password are submitted from the UI (angular) to Flask: public send_login(user){ console.log(user) return this.http.post(this.apiURL+'/login',JSON.stringify(user),this.httpOptions) .pip ...

python-3.x angular typescript flask angular-ui-router

`Navigating seamlessly across multiple Angular applications`

Contemplating the use of Angular in a corporate setting, I am thinking ahead to having multiple applications. Does Angular support the use of multiple applications and sharing components? For instance, can I share a Navigation component? Update (2/1/19): ...

angular

Navigating from a Card to a new View in Angular

I am currently developing a project using Angular (latest version). Within my application, I have the functionality to dynamically generate bootstrap cards from an Order Array and display them in my "Order-Item-Component through its respective template. ...

html angular typescript bootstrap-4 angular2-routing

Troubleshooting a 400 error when trying to authenticate with Firebase using AngularFire2

Authentication through Google has been enabled in the console: Here is the login code: import { Component, OnInit } from '@angular/core'; import { AngularFire, AuthProviders } from 'angularfire2'; @Component({ selector: 'app-l ...

angular firebase-authentication angularfire2

Is it possible to separate a portion of HTML into a template and reuse it in multiple locations within a webpage?

In my HTML, I have an issue with duplicate code. In Java, I typically use IntelliJ to mark the code and select "extract method" => "replace 2 occurrences". I am looking for a similar solution in HTML, but the current method seems messy: <ng-template #b ...

html angular

One parent contains two identical components, but the first component takes precedence over the second

Within my component, I have two subcomponents that are identical:  <app-upload-button #idBook [accept]="'image/*'" (loadend)="onImageLoaded('#this-idbook-preview')" > </app-upload-button> ...

angular

Ionic: Implementing a clear text field function when the ion-back-button is clicked

So I've created a feature where users can scan product barcodes using BarcodeScanner. Once the barcode is scanned, the product ID appears in a text field and is then sent to another page where an API call is made to display product details. On this pr ...

angular typescript ionic-framework

An error occurred while uploading a file in the StaticInjectorError of the AppModule related to the HttpHandler and Injector

Hey there! I'm currently working on a project using Angular 9 and Angular Material. I'm trying to implement the mat-file-upload feature, but when I run the app, I keep getting this error message: "StaticInjectorError(AppModule)[HttpHandler -> Inj ...

angular http angular-material styles

Using the pipe operator in RXJS to transform an Event into a KeyboardEvent

I'm encountering an error when trying to add a keydown event and convert the parameter type from Event to KeyboardEvent as shown below. fromEvent(document, "keydown") .pipe<KeyboardEvent, KeyboardEvent>( filter((event) => even ...

angular typescript rxjs

Loop through every element in the Angular2 template

I am working with the following template and I need to access all the elements within it. Using ViewChildren only gives me a reference to one element, most likely because no two elements are the same and I am not using the same directive/component inside t ...

angular

QAnswer