[Question]: How can I build authorize url

[JyotiP10]

Library version: "angular-auth-oidc-client": "^15.0.2",

Question
How can I create authorize url for this library.
Usecase: I am trying to implement capacitor in-app browser (https://capacitorjs.com/docs/apis/browser) feature for my pure angular based web application.

My intention is to open the sts link inside the android application created with the help of capacitor and Im trying to take reference with the auth0 sample application(https://auth0.com/docs/quickstart/native/ionic-angular/interactive) .

This snapshot shows the build the authorize url and then pass that to Browser plugin . Similarly I want to take help of above library to build the url and then pass that to the Browser plugin.

@damienbod and @FabianGosebrink please help to get this issue resolved.

[FabianGosebrink]

So what you can do is you can login with this lib with the normal oidcSecurityService.authorize(); method. You have to register a custom url scheme to your device, when auth0 sends you back to your app, the mobile phone needs to know to hook into your app. You then can take the URL and pass it to the checkAuth(...) method. I have a working auth0/angular/capacitor example here https://github.com/FabianGosebrink/doggo-rate-app.

[JyotiP10]

@FabianGosebrink Thanks for the reply.
I have tried running the sample provided , it is working well when it opens (Auth 0) url open url external browser . My requirement is how i can open the (Auth 0 url:https://dev-2fwvrhka.us.auth0.com) in internal WebView. Any working sample would be of great help. Appreciate your support

[FabianGosebrink]

You can pass an url handler, handling the call to the IDP and then use capacitors browser plugin https://capacitorjs.com/docs/apis/browser. Have you tried that?

[JyotiP10]

Hello I tried with browser plugin to load urls but I am not getting how to bind this in IDP case, could you please provide with some sample code for above suggestion to try .

Thanks in advance.

[FabianGosebrink]

I do not have any sample code for your specific issue. What do you mean with "bind this in IDP case"? You can pass an URL handler in the authOptions in the .authorize() method. In this, you can call the Browser plugin from capacitor. This is what I would try :) https://angular-auth-oidc-client.com/docs/documentation/login-logout#authoptions

[JyotiP10]

import { Browser } from '@capacitor/browser';

const openCapacitorSite = async () => {
await Browser.open({ url: 'http:https://capacitorjs.com/' });
};

In above code sample,"url" needs to be passed for Browser.open(), so in my case to integrate the IDP "url" needs to be passed to the Browser plugin I passed in this way

this.oidcSecurityService.authorize(undefined, {
urlHandler: async () => {
await Browser.open({ url: redirectUrl });
},
});

where "redirectUrl" is the redirect url mentioned in the config file , but after building the app and running its crashing and not opening the login page

[FabianGosebrink]

You have to pass the url of the IDP. Auth0 in this case.

[JyotiP10]

Hello I am using identity server 4 for that and when I try calling its endpoint on Browser.open({url:'https://xx.xx.x/connect/authorize'}) I am facing this error

Can you @FabianGosebrink please help me with this should could be better way of calling the identity server url with authorize() method

this.oidcSecurityService.authorize(undefined, {
urlHandler: async () => {
await Browser.open({ url: 'https://xx.xx.x/connect/authorize'});
},
});

[damienbod]

Hi @JyotiP10

You do not implement part of the flow inside the native app. You should open a browser, begin the flow from the browser and then return the tokens to the app when the authentication flow is complete. The redirctUrls are host dependent and need to be configured on the IDP. You need to let the lib redirect because it adds the required params which are dynamic and validated when the flow completes.

Greetings Damien

[JyotiP10]

Hello ,

Thanks for the brief explanation! @damienbod

Actually what I am trying is to open the IDP server link from in-app browser so in case of capacitor we need to provide below code in "capacitor.config.json" file to open the link inside the app browser,
"server":
{
"allowNavigation": ['https://your.idp.server.com']

}

This opens the IDP link (in my case IS4 login page) inside the application chrome browser , now after providing the login details and clicking the login button the request for endpoint https://xx.xx.x/connect/authorize' fails with error

Could you please suggest a way to solve this issue @FabianGosebrink .