Caleb Remington
If anyone is attempting to develop this app using Symfony 5 & Angular 9 (latest version) and Okta (^2.0.0), here are a few discrepancies that I found while creating this:
Setting the correct Okta Redirect URI
Set a descriptive application name, add http://localhost:3000/login as a Login redirect URI, and click Done. You can leave the rest of the settings as they are.
But in the code, he specifies “/implicit/callback” as the redirect URI. Okta kept throwing a 400 error because “/login” and “/implicit/callback” didn’t match.
const oktaConfig = {
issuer: ‘{YourIssuerURL}’,
redirectUri: ‘http://localhost:4200/implicit/callback’,
clientId: ‘{yourClientId}’
};
Within the Okta Application you created, make sure you specificy “https://example.com:4200/implicit/callback” as the redirectUri and “https://example.com:4200” as the logout redirect and initiate login URIs. Also, within API >> Trusted Origins, make sure you add your domain for CORS & Redirect: https://example.com:4200
In Okta ^2.0 vs ^1.0, the OktaAuthModule.initAuth(oktaConfig) no longer exists. Modify the imports and add to the providers within the @NgModule function in src/app/app.module.ts:
import { OKTA_CONFIG, OktaAuthModule, OktaCallbackComponent } from ‘@okta/okta-angular’;
imports: [
BrowserModule,
AppRoutingModule,
RouterModule.forRoot(routes),
OktaAuthModule
],
providers: [{ provide: OKTA_CONFIG, useValue: oktaConfig }],
I couldn’t get Okta to return a response because my dev site IP wasn’t secure. Create a self assigned SSL certificate, and in your Angular.json file, add relative path to your private key & cert:
“serve”: {
“builder”: “@angular-devkit/build-angular:dev-server”,
“options”: {
“browserTarget”: “bad-puns-tracker-client-ng:build”,
“sslKey”: “/etc/letsencrypt/live/example.com/privkey.pem”,
“sslCert”: “/etc/letsencrypt/live/example.com/fullchain.pem”
},
When you build the angular app, make sure you specify the ssl and host flag: ng serve --host=example.com --open --ssl
Hope this helps!