Tutorial: Build Your First CRUD App with Symfony and Angular

Tutorial: Build Your First CRUD App with Symfony and Angular

This tutorial shows you how to set up a ‘quick and dirty’ modern application using a backend API written in Symfony 4 and a frontend in Angular, with a minimal dependencies and no hassle.

JeCommenteDoncJeSuis

Hello,

Thanks for this tutorial, but unfortunately, it’s not working for me!

When I try to login, I have error 400
When I try to access directly the movies list, I have error 401 in symfony side.
Yet I followed exactly the same steps as you…
Perhaps missing something in the “Application” that I added in my Okta dashboard?

Thanks for giving some tips and advice

Tac Tacelosky

Terrific article. When Symfony 4.3 comes out next week, would you consider creating another article that uses API Platform and Symfony’s new HttpClient instead of Guzzle? It’s a bit more setup, but also much easier to leverage and use in real-world app.

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!

Krasimir Hristozov

It’s a good idea, and Symfony 5 looks pretty good. I’ll consider this as a future topic.