Hi @Mannus_Etten I got it working okay using the inline login pattern. The sample you sent me wasn't working correctly because of how Angular routing works. I think you already suspected that because I saw you started to implement a router.
Here's the example app.component.ts (Angular 13, "@arcgis/core" version 4.24). You'll need to figure out all the CSS and routing, etc that happens after the log in process.
import { Component } from '@angular/core';
import OAuthInfo from "@arcgis/core/identity/OAuthInfo";
import esriId from "@arcgis/core/identity/IdentityManager";
import Portal from "@arcgis/core/portal/Portal";
import PortalQueryParams from "@arcgis/core/portal/PortalQueryParams";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Test Login Page';
private info: OAuthInfo = new OAuthInfo({
// Swap this ID out with registered application ID
appId: "YOUR_APPID_GOES_HERE",
popup: false
});
ngOnInit(): void {
esriId.registerOAuthInfos([this.info]);
esriId.checkSignInStatus(this.info.portalUrl + "/sharing")
.then(() => {
console.log("checkSignInStatus: User is signed in.");
this.displayItems();
})
.catch(() => {
console.error("checkSignInStatus: User not signed in.")
});
}
displayItems(): void {
const portal = new Portal();
// Setting authMode to immediate signs the user in once loaded
portal.authMode = "immediate";
// Once loaded, user is signed in
portal.load().then(() => {
// Create query parameters for the portal search
const queryParams = new PortalQueryParams({
query: "owner:" + portal.user.username,
sortField: "num-views",
sortOrder: "desc",
num: 20
});
console.log("User name: ", portal.user.username);
// Query the items based on the queryParams created from portal above
portal.queryItems(queryParams).then((q) => {
console.log("Portal Query results:", q.results);
});
});
}
// Call from app.component.html page
onLogin() {
esriId.getCredential(this.info.portalUrl + "/sharing");
}
// Call from app.component.html page
onLogout() {
esriId.destroyCredentials();
window.location.reload();
}
}
And here is the example app.component.html:
<!-- app.component.html -->
<div><button type="submit" (click)="onLogin()"><b>Login</b></button></div>
<div><button type="submit" (click)="onLogout()"><b>Logout</b></button></div>
