Hi Team,
Once we enter login creds . For login/callback url we are getting white blank screen
Url : [https://test.com/login/callback?code=hEkMXFmRUqUfFpXSAHulqlRs5qHNpK&state=CkRR87aXQcc5SX3HM6LDC19YcAMYaXEWCcEYtiezVO62BSHccSWZwCLPx9N5rax7 .
Also, I check console, I found below error,
Uncaught SyntaxError: Unexpected token ‘<’
runtime.1e67b41….js polyfills.ba27af3….js
Sounds like the /authorize call succeeded and an authorization code is getting returned back to your application, but is getting stuck there.
Are you using one of Okta’s SDKs for the callback route (to exchange the authorization code for tokens)? Happen to have a code snippet you can share?
1 Like
app-routing.module.ts
{ path: 'login/callback', component: OktaCallbackComponent },
app.components.ts
export class AppComponent implements OnInit{
public isAuthenticated$!: Observable<boolean>;
constructor(@Inject(OKTA_AUTH) private oktaAuth: OktaAuth, public oktaStateService: OktaAuthStateService,private router: Router) {
}
public ngOnInit(): void {
this.isAuthenticated$ = this.oktaStateService.authState$.pipe(
filter((s: AuthState) => !!s),
map((s: AuthState) => s.isAuthenticated ?? false)
);
}
public async signIn(): Promise<void> {
await this.oktaAuth.signInWithRedirect().then(
_ => this.router.navigate(['/profile'])
);
}
public async signOut(): Promise<void> {
await this.oktaAuth.signOut();
}
}
app.component.html
<ng-container *ngIf="(isAuthenticated$ | async) === false; else signout">
<button (click)="signIn()"> Sign in </button>
</ng-container>
<ng-template #signout>
<button (click)="signOut()">Sign out</button>
</ng-template>
app.module.ts
import oktaConfig from './app.config';
const oktaAuth = new OktaAuth(oktaConfig.oidc);
{ provide: OKTA_CONFIG, useValue: { oktaAuth } }
app.config.ts
export default {
oidc: {
clientId: 'eteteteteetetetetetet',
issuer: 'https://dev-82398708.okta.com/oauth2/default',
redirectUri: window.location.origin + '/login/callback'
}
};