Categories
Software Development Web Development

How to get URL Routes in your Javascript in Symfony 5+

This is something I needed to know how to do so I could generate URLs inside my javascript more easily.

Currently the docs on this are outdated so I will record what I did here so I can know later, or for others who need this info.

The docs say something about app/appKernel.php that file no longer exists.  It has been replaced with just kernel.php and you do pretty much nothing to that file.

I am not sure what version Symfony started this but I know in 5+ you don’t have to register the bundle like step 2 of the old docs shows. This is done automatically for you in a new file named config/bundles.php which is where all bundles are automatically registered when you install them.

So all you do is this command now in the terminal

composer require friendsofsymfony/jsrouting-bundle

inside your apps root level. It is auto registered for you.

You don’t have to do step 3 of the old docs either as the config system has changed. There is no

app/config/routing.yml

file anymore. When you install the bundle the new system creates a new file named app/config/routes/fos_js_routing.yaml for you
For step 4 the required code has changed you need to enter this now.

$ php bin/console assets:install --symlink public

Basically to install the bundle you just use the composer command and most of the stuff is now done for you.

A silent secret.

In order for the routes to work you must add something new to every single route definition you want to be able to generate a route in your javascript for.

You must add this to the annotation or where ever you define your routes. I use annotations so I can just look to the controllers, plus when I split the system into microservices the routes go with their services.

options={"expose"=true}

So for my menu route the definition in the controller looks like this.

@Route("/menu", name="menu", options={"expose"=true}, methods={"GET"})
</code.

Now how to use it?

So now that it is installed how do you use it? One more step. Now you must include the needed Javascript in your page with these tags.

<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>

Place those anywhere you want. What I did is put them in my base twig template in a section where I include my Javascript this way it is available on every page because I will probably be needing access to routes as I build the app.

Once you have all of the above done you can use it like this

let testUrl = Routing.generate( 'menu');
console.log(testUrl); //outputs /menu

Route not found errors?

Yes I got these too. You must add expose

options={"expose"=true}

to every single route you want to use. And your IDE probably won’t be very helpful so double check the spellings. Routing probably won’t be found by your IDE.

Here is a link to my favorite HTMLEntities converter if you write articles about programming you will need this.

 

Categories
Web Development

Symfony 5+ how to import or link to javascript and css files with webpack encore

Symfony has a handy way of importing your css and javascript files into your templates/pages to use them. You can find the full info in the docs link here.

This was a little confusing to me at first.  Mostly due to my lack of knowledge of some of the Webpack and  modern JS features like importing.
Basically when you update the webpack configuration to add another entry point for a separate Javascript file, it also creates a matching CSS file if your javascript file imports any CSS.  Many 3rd party packages will have imports, as I found out with SunEditor(totally awesome wysiwyg html editor). So when you try to create a script that relies on a CSS file of it’s own like suneditor you need to import like this inside the file.

//edit-about-user.js
import 'suneditor/dist/css/suneditor.min.css'
import suneditor from 'suneditor'
import plugins from 'suneditor/src/plugins'
let aboutInput = 'about-input';
suneditor.create(aboutInput, {
    plugins: plugins,
    buttonList: [
        ['undo', 'redo'],
        ['font', 'fontSize', 'formatBlock'],
        ['paragraphStyle', 'blockquote'],
        ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
        ['fontColor', 'hiliteColor', 'textStyle'],
        ['removeFormat'],
        '/', // Line break
        ['outdent', 'indent'],
        ['align', 'horizontalRule', 'list', 'lineHeight'],
        ['table', 'link', 'image', 'video', 'audio' /** ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin.
        /** ['imageGallery'] */ // You must add the "imageGalleryUrl".
        ['fullScreen', 'showBlocks', 'codeView'],
        ['preview', 'print'],
        ['save', 'template']
    ]
})

This is what confused me I thought the Javascript code would automatically include the CSS file when I included the Javascript in the page with a tag like this

//inside edit-about-user.html.twig
{% block javascript_extra %}
{{ encore_entry_script_tags('editAboutUser') }}
{% endblock %}

block javascipt is my custom twig section, encore_entry_script_tags includes the javascript. This is where I falsely assumed that the import statement above would include the CSS in the page along with the Javascript. The above encore_entry_script_tags function only includes the Javascript. To include the CSS which is the same from the import statement above you must use another tag.

//inside edit-about-user.html.twig
{% block stylesheets %}
{# 'app' must match the first argument to addEntry() in webpack.config.js #}
{{ parent() }}
{{ encore_entry_link_tags('editAboutUser') }}
{% endblock %}

Again block stylesheets is just my custom twig block section. encore_entry_link_tags is the magic needed to include the CSS on the page that the import statement included above. This is what confused me I thought Webpack was bundling the CSS somehow with the JS. What it does is create two files one CSS and one Javascript. You must use the encore_entry functions to include both to get what ever project you are using functioning.

So as I found out you must include both the CSS and JS with encore_entry_ tag functions.

Categories
Web Development

How to get the user id in a service in Symfony 5

I’m no Symfony expert, I write what I find as I find it. Nothing in the documentation really covers this subject, so I am not sure what the correct way is of if there even is one.

There are a few ways I have found to get a user id. None of the classes you can inject such as UserInterface, SessionInterface, TokenInterface, Security etc. contain an actual getUserId() method.

You can  get a user object from the Security class, as seen in the documentation here. To do so you type hint aka Dependency Inject your service constructor with Security but not just any Security will do there is also one by Sensio labs and another. You want this Security

use Symfony\Component\Security\Core\Security;

Then your ide wont show it or will warn something about a polymorphic call blah blah, but apparently there is a getId() method of the user returned from Security and you can get a user id like this.


/** @var User $user */
$user = $this->security->getUser()->getId();
if(!empty($user){
$userId = $user->getId();
}

This method may return null if the user is not logged in so you need to check for that. The @var syntax tells the IDE what is going on so it knows there is a getId() method, you will also need to import that class. The User object it refers to is your App/Entity/User class.

Forgive me if anything is wrong.
Link to a Symfony cast with a little more info but not much.

Categories
Resources Web Development

How does login and authentication work in Symfony 5.*

This is mostly for myself as a reminder. The most frustrating part of Symfony is Authentication because the information is scattered all over between articles, symfonycasts etc. just all over, like a unicorn farting out rainbow sprinkles.

There are two versions of authentication an old one and a new one. The old one uses Authentication providers the new one users just Authetincators. No one but the authors of Symfony know WTF the difference is though.

Note : to add confusion Symfony refers to what you usually call Sessions as Tokens FFS.

First off a list of files involved in the login process :

  1. The login form obviously app/templates/security/login.html.twig
  2. A security controller app/src/Controller/SecurityController.php
  3. A user Provider aka the User entity class app/src/Entity/User.php
  4. An Authenticator app/src/Security/LoginFormAuthenticator.php

When a user requests /login Symfony first calls LoginFormAuthenticator.php to check to see if the user is logged in/authenticated so the work is not done in the controller like most other actions. To change, add, remove anything from the authentication process you make changes in the LoginFormAuthenticator.php methods.

There is a new experimental Authentication system it still uses authenticators but a slightly different process.

This authenticator is listed in the app/config/packages/security.yaml file under firewalls:main:guard:athenticators as

- App\Security\LoginFormAuthenticator

symfony firewall authenticator section

Every time a request is made the firewall will use the authenticator listed to try to authenticate the user. If authentication fails Symfony secretly behind the scenes tries other ways to authenticate the user as you can see in the image below.

symfony guards
Secret guards attack

As you can see in the image above Symfony will try your guard you listed in the configuration file, but it also tries it’s own secret list of default authenticators.

For information about the login form see this article in the scatterdocs. A little more info about the login form and process from the Symfony Spaghetti docs.

Categories
Resources Web Development

Symfony Session resources list

Plain session docs – This is the symfony documentation page about Sessions alone. This link shows the basic configuration and use of Sessions in Symfony. This also mentions not starting a session for Anonymous users and has links to other info about sessions.

Configuring Sessions and Save handlers – Symfony documentation link. This covers more about how to configure sessions and their Save Handlers. This is some of the better information about Sessions and how they work in Symfony. It covers the save handlers and more of the configuration information.

Session proxy examples – Symfony Documentation link. This covers how to create your own session handler. It also discusses how to encrypt session data with an example.

Framework configuration – Symfony documentation link. This covers many of the options for the security component of Symfony.

Store sessions in a database – Symfony documentation link that describes how to store session data in a database or Redis.

Session Management – Symfony documentation link. Explains how sessions are managed in symfony. Gives a good overview and important information about how symfony functions. It covers the functions symfony uses to replace PHP session functions and how to use them. This also covers the ways to work with sessions in Symfony. Oddly this covers Flash messages too.

 

Categories
Resources Web Development

Symfony errors and exception handling resources

How to customize error pages – Documentation page about how to create custom error pages.
How to Customize Access Denied Responses – specifically about how to customize access denied responses. This is useful for when you use voters to authorize a users access to content.

Categories
Resources

Links and resources about Symfony firewall and authentication system

One thing you will want to do is view your current security settings to do so you use this command.
php bin/console debug:config security

Old symfony cookbook security entry – This is an ancient link to nearly the very beginning of symfony. This explains the mechanics of the Symfony security system if you are like me and just want to know how the hell this functions so you can feel confident in the system and be able to diagnose and fix issues.

More on Security – this is another ancient link like above, it explains the system.


Symfony cast covering
firewall and authentication and how it works. This has lots of info that should be directly in the documentation.

Security configuration reference -> not complete listing of some of the values you can set. If you run the debug:config command above you will see more values you can set, but good luck figuring out what they do.

How to restrict firewalls to a request -> symfony docs. This talks about using multiple firewalls and how the Symfony firewall system works like a waterfall trying one firewall after another until it finds one that works or uses the last  firewall listed. This also explains some of the options to the firewall. This basically shows how to use multiple firewalls.

Symfony cast about security – this covers the entire system. Some things have changed in version 5 but this is mostly correct and serves as a starting point.

Security user providers – Part of the Firewall/Authentication/Authorization system is something called security providers. User providers check the users identity from a session cookie to verify the user. This part of the documentation talks about how the firewall uses the User providers to authenticate the user after they have logged in.

Custom Authentication System with Guard (API Token Example) – talks about how to create a custom API token

Built-in Authentication Providers – documentation about the built in service providers.

Symfony Cast about gaurds – this is ancient from version 3, but it is helpful because it covers how the system is supposed to work or was supposed to.

The firewall and authorization – this covers how authorization works in the firewall system. It has a section at the bottom that explains how the firewall/authentication/authorization flow works.

Using the form_login Authentication Provider  – This explains how to create a login form and how the system processes it and authenticates the user.

Videos


A good video explaining how multiple authenticators work

Categories
Resources

Links and resources about Symfony Doctrine fixtures

Symfony cast page about fixtures.

Categories
Resources Web Development

Symfony caching resource list and information

Once I started digging into Symfony caching I found all kinds of information all over. I’ll use this page to catalog it all for myself and others. This way I can quickly find what I am looking for.

Cache – From the docs. This is the overall plain documentation about Symfony cache. It covers the following

Configuring Cache with FrameworkBundle
Creating Custom (Namespaced) Pools
Custom Provider Options
Creating a Cache Chain
Using Cache Tags
Clearing the Cache
Encrypting the Cache

The Symfony Cache component – This is the actual caching component documentation. It covers the following.

Installation
Cache Contracts versus PSR-6
Cache Contracts
Available Cache Adapters
Generic Caching (PSR-6)
Basic Usage (PSR-6)
Advanced Usage

Cache pools and Adapters – from the documentation. This covers cache adapters such as Redis and Memcached. It covers the following information.

Creating Cache Pools
Using the Cache Contracts
Using PSR-6
Looking for Cache Items
Saving Cache Items
Removing Cache Items
Pruning Cache Items

Cache items – from the documentation. You need ItemInterface and cache items in order to set expire information on cached items. This link covers the following :

Cache Item Keys and Values
Creating Cache Items
Cache Item Expiration
Cache Item Hits and Misses

Tagged Cache aka Tag Aware Caching – This article explains how tag aware caching works in Symfony. The article is old from version 3.2 when this feature was added.

Categories
Resources Web Development

Symfony 5+ check if user is logged in inside a twig template

Often you may need to know whether a user is logged in or not inside a template to show or not show something. For example you might want to show links to login or register if a user is not logged in but show a link to logout if the user is logged in.

To do this you use is_granted() within a template with one of the following.

IS_AUTHENTICATED_ANONYMOUSLY, IS_AUTHENTICATED_REMEMBERED, IS_AUTHENTICATED_FULLY

<div class="modal-body">
<ul class="nav flex-column">
{% if is_granted('ROLE_SUPER_ADMIN_1') %}
<a class="nav-link" href="{{ path('show_dash') }}">Dashboard</a>
{% endif %}
{% if is_granted('ROLE_USER') %}
<a class="nav-link" href="{{ path('app_logout') }}">Logout</a> {% else %}
<a class="nav-link" href="{{ path('app_login') }}">Login</a> or <a class="nav-link" href="{{ path('app_register') }}">Signup</a> {% endif %}
</ul>
</div>

Using ROLE_SUPER_ADMIN_1 which is something I made up for my own app to check what type of admin the user is. I don’t really like the IS_AUTHENTICATED_* methods, read more about them in the link below if you want.

Link to more information about IS_AUTHENTICATED_* here in  a really old symfony cast I found via google.