Set the redirect_uri on ArcGIS JS application for ArcGIS Online WebApp

Question

I am trying to create a javascript application using the ArcGIS JS API. I want to use a webmap created on the ArcGIS online. So, I have set the ArcGIS Online WebApp and register it in order to have the appID.

I downloaded the identity-oauth-basic.html from AGOL Link

I altered the appID to match the one of my WebApp and I get Invalid redirect_uri Error as shown bellow.

I checked the details and the redirect_uri is linking back to my html file... How can I set/use the correct redirect_uri on the ArcGIS JS application?

I tried to set the redirect_uri on the OAuthInfo directly without luck

var info = new OAuthInfo({
    // Swap this ID out with registered application ID
    appId: "<appID in here>",
    redirect_uri: "<redirect_uri in here>",
    // Uncomment the next line and update if using your own portal
    // portalUrl: “https://<host>:<port>/arcgis”

    // Uncomment the next line to prevent the user's signed in state from being shared with other apps on the same domain with the same authNamespace value.
    // authNamespace: "portal_oauth_inline",
    popup: false
  });

Answer 1

Go to your ArcGIS Online App page and add the URL of the page it's redirecting to to your "Redirect URIs"

1. Click Content and click the title of the app you want to register to view its item details.

2. Click the Settings tab. Scroll down to the Application Settings section and click Register. If you've added a generic type of app, the app is automatically registered, and the Registered Info button is available instead of the Registered button. You can view and update the registration information.

3. Select the type of app: browser, native, server, or multiple.

4. For each redirect Uniform Resource Identifier (URI), enter the address in the format ["https://[:port]"] or ["http://[:port]"] and click Add. Redirect URIs are valid addresses that users of your app can be redirected to after they successfully log in.

https://doc.arcgis.com/en/marketplace/provider/register-app.htm

Answer 2

The way I have it set up for my WebApp is the redirect URIs are just set to the root level URL, not the html file itself. In my code I have the information for the ArcGISOAuthInfo

    var info = new ArcGISOAuthInfo({
        appId: <myAppId>,
        popupCallbackUrl: "https://<URLlocation>/oauth-callback.html",
        popup: true
    });