DEV Community: Mickaël

Login Link (password less) with Symfony

Mickaël — Thu, 15 Apr 2021 11:23:56 +0000

New Security's component

Symfony 6 will get a new or maybe I should say an update of the Security Component. New feature will come with it and good news we can already use it 😊

Login Link

As says the doc, "the login link also called “magic link”, is a passwordless authentication mechanism. Whenever a user wants to login, a new link is generated and sent to them (e.g. using an email). The link fully authenticates the user in the application when clicking on it."

Let's start

I have a new symfony's project and I've already configurated the authentication. Now to use the login link feature, I have to enable the authenticator manager in my security.yaml and disable the anonymous in my firewall

security:
    enable_authenticator_manager: true

firewalls:
        dev:
            pattern: ^/(_(profiler|wdt)|css|images|js)/
            security: false
        main:
            #anonymous: true

Now I can tell to Symfony I want to use the login link. In my firewall so I add it :

login_link:
         check_route: app_login_check
         signature_properties: [id]
         lifetime: 300

Check_route is the name of the route that Symfony need to generate the login link to authenticate the user.
Signature_properties are used to create a signed URL. This must contain at least one property of your User object that uniquely identifies this user
Lifetime is the link's lifetime in seconds. Here I said 5 minutes

Then in the SecurityController, I write a new function called "check" with the route "/login-check". This function can be empty

/**
     * @Route("/login-check", name="app_login_check")
     */
    public function check()
    {
        throw new \LogicException('This code should never be reached');
    }

Now I create the controller which will send the login link to the user

/**
     * @Route("/forgotten-password", name="app_login_link")
     */
    public function requestLoginLink(
        NotifierInterface $notifier,
        LoginLinkHandlerInterface $loginLinkHandler,
        UserRepository $userRepository,
        Request $request
    )
    {
        if ($request->isMethod('POST')) {
            $email = $request->request->get('email');
            $user = $userRepository->findOneBy(['email' => $email]);

            if ($user === null){
                $this->addFlash('danger', 'This email does not exist ');
                return $this->redirectToRoute('app_login_link');;
            }

            $loginLinkDetails = $loginLinkHandler->createLoginLink($user);

            // create a notification based on the login link details
            $notification = new CustomLoginLinkNotification(
                $loginLinkDetails,
                'Link to Connect' // email subject
            );
            // create a recipient for this user
            $recipient = new Recipient($user->getEmail());

            // send the notification to the user
            $notifier->send($notification, $recipient);

            // render a "Login link is sent!" page
            return $this->render('security/login_link_sent.html.twig', [
                'user_email' => $user->getEmail()
            ]);
        }

        return $this->render('security/login_link_form.html.twig');
    }

First I check if the method is "POST" then I get the email. If the user is not in my database then I redirect him in the same page with error message, here it's a flashbag

if ($user === null){
                $this->addFlash('danger', 'This mail does not exist ');
                return $this->redirectToRoute('app_login_link');;
            }

I create the login link $loginLinkDetails = $loginLinkHandler->createLoginLink($user); and the notification. In my case I use a CustomLoginLinkNotification but if you don't want you can use the LoginLinkNotification.
Then I create the recipient for the user and I send the notification

// create a recipient for this user
            $recipient = new Recipient($user->getEmail());

            // send the notification to the user
            $notifier->send($notification, $recipient);

When the link is send, a new template appear with a custom message. You can write what you want, here I wrote "The link is send to your email address : {{ user_email }}

return $this->render('security/login_link_sent.html.twig', [
                'user_email' => $user->getEmail()
            ]);

For the email to be correctly send , I need to install :

Mailer
twig/cssinliner-extra
twig/inky-extra

I use a full project symfony and if you don't, you will need to instal notifier and twig

Now I create a new Notifier's folder in 'App' and I create my new class : CustomLoginLinkNotification

<?php


namespace App\Notifier;

use Symfony\Component\Notifier\Message\EmailMessage;
use Symfony\Component\Notifier\Recipient\EmailRecipientInterface;
use Symfony\Component\Security\Http\LoginLink\LoginLinkDetails;
use Symfony\Component\Security\Http\LoginLink\LoginLinkNotification;

class CustomLoginLinkNotification extends LoginLinkNotification
{
    private LoginLinkDetails $loginLinkDetails;

    public function __construct(LoginLinkDetails $loginLinkDetails, string $subject, array $channels = [])
    {
        parent::__construct($loginLinkDetails, $subject, $channels);

        $this->loginLinkDetails = $loginLinkDetails;
    }

    public function asEmailMessage(EmailRecipientInterface $recipient, string $transport = null): ?EmailMessage
    {
        $emailMessage = parent::asEmailMessage($recipient, $transport);

        // get the NotificationEmail object and override the template
        $email = $emailMessage->getMessage();
        $email->from('admin@example.com');
        $email->content($this->getLeftTime());
        $email->htmlTemplate('email/_custom_login_link_email.html.twig');

        return $emailMessage;
    }

    public function getLeftTime(): string
    {
        $duration = $this->loginLinkDetails->getExpiresAt()->getTimestamp() - time();
        $durationString = floor($duration / 60).' minute'.($duration > 60 ? 's' : '');
        if (($hours = $duration / 3600) >= 1) {
            $durationString = floor($hours).' hour'.($hours >= 2 ?'s' : '');
        }

        return $durationString;
    }
}

Here I extends the LoginLinkNotification and I override the function asEmailMessage to send a custom mail. The function getLeftTime is the code from the doc to get the lifetime of the link and to be able to send it in the email. My email look like this :

<p>Click on the link below to connect, it expires in {{ content }} </p>
<a href="{{ action_url }}">Connect</a>

When the link is send, the user can click on the button and he will be connect. In my case when an user is connect (after login) he is redirect to the page /{user} and it's the same thing when he clicks on the link. I like this so I will not change this behaviour but if you want to do something else like a new route or maybe persist some information in your database, you can create a success_handler. You could find how to do it in the doc.

If the link is expires and the user click on it, by default he will be redirect to "/login". I don't want that because my route to the login is '/'. I will create then a failure_handler.
First in the security.yaml I need to tell to Symfony I want to handle the failure myself :

login_link:
                check_route: app_login_check
                signature_properties: [id]
                lifetime: 300
                failure_handler: App\Security\Authentication\AuthenticationFailureHandler

Next I create my failure's handler :

namespace App\Security\Authentication;

use Symfony\Component\HttpFoundation\RedirectResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Session\Flash\FlashBagInterface;
use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
use Symfony\Component\Security\Core\Exception\AuthenticationException;
use Symfony\Component\Security\Http\Authentication\AuthenticationFailureHandlerInterface;

class AuthenticationFailureHandler implements AuthenticationFailureHandlerInterface
{
    private UrlGeneratorInterface $urlGenerator;
    private FlashBagInterface $flash;

    public function __construct(UrlGeneratorInterface $urlGenerator, FlashBagInterface $flash)
    {
        $this->urlGenerator = $urlGenerator;
        $this->flash = $flash;
    }

    public function onAuthenticationFailure(Request $request, AuthenticationException $exception): Response
    {
        $this->flash->add('danger','this link is expires 😮😮😮');
        return new RedirectResponse($this->urlGenerator->generate('app_login'));

    }
}

The goal of this handler is to redirect the user to the route I want in case the link is expires with a flash message error.

That's it guys !

Of course I didn't show you everything, there are differents custom you can do. For me this feature is a better way for the users who has forgotten their password

There are new features to explore with the "new" Security component like the Login Throttling for example but it will be for an other time...

Get your SQL functions in DQL

Mickaël — Mon, 08 Feb 2021 13:42:44 +0000

SQL Functions

In SQL you have plenty functions which help you to improve your work. For example this is some usefull functions :

SUM() Calculate the sum of the result
MAX() Get the maximum result
MIN() Get the minimum result
COUNT() Count the number of row of the result

And fortunatly we can use them in DQL... but unfortunatly not all of them !

DQL

When I code with Symfony and I need to query my Database, I always use DQL. I love that thing, I can customize it and write PHP to be more specific.
But few days ago, I needed to display only the date (not the time) from my UserRepository. In SQL you do this => SELECT DATE_FORMAT(date, format) WHERE ..., so I started to write my code in DQL :

public function findByCreatingDate(User $userId)
    {
        return $this->createQueryBuilder('u')
            ->select('DATE_FORMAT(u.createdAT, "%d-%m-%Y)')
            ->andWhere('u.id = :userId')
            ->setParameter('userId', $userId)
            ->getQuery()
            ->getResult()
        ;
    }

I refreshed the page and the scariest red smilling ghost appeared and told me "Error: Expected known function, got 'DATE'"

This is one of some functions that DQL does not support. Well I had 3 choices :

Type in SQL
Write my own DQL function
Google the error !

The first choice has been removed because either I write all in SQL or in DQL, I never mix and I did'nt want to rewrite all my queries.
I Google my error before doing the second choice 🙄 and I found exactly what I was looking for in this Github.
I just needed to do composer require beberlei/doctrineextensions then in my doctrine.yaml under orm :

dql:
    datetime_functions:
       date_format: DoctrineExtensions\Query\Mysql\DateFormat

Refresh the page and goodbye terrible red ghost 👻

Conclusion

I hope it's gonna be usefull to you as it has been to me

Cheers

Actual route and UX with Twig

Mickaël — Sun, 24 Jan 2021 13:23:49 +0000

How to design current route in our link's navbar with TWIG ? This is exactly what we are going to see 😀

Our navbar and routes

Let's say we have a blog which display pictures and videos. Our navbar would have 4 links :

Home
Pictures
Vidéos
Contact

About the routes, we just want the giving name, so :

Home => "app_home"
Pictures => "app_picture"
Vidéos => "app_video"
Contact => "app_contact"

Right, we have all the information, now have a look on our twig template :

<nav>
 <ul>
   <li>
     <a href="{{ path('app_home') }}">Home</a>
   </li>
   <li>
     <a href="{{ path('app_picture') }}">Pictures</a>
   </li>
   <li>
     <a href="{{ path('app_video') }}">Videos</a>
   </li>
   <li>
     <a href="{{ path('app_contact') }}">Contact</a>
   </li>
 </ul>
<nav>

Here if we click on a link, we would be redirect to the route but nothing (except the URL) will indicate us that we are on the right route. So let's do some UX.

Twig function

We are going to right a function in twig. We need to install a package :
composer require twig/extensions

Name it as you want and go in the file. Erase all about the filter (except if you want to go further and try some) and go in the public function getFunctions.
Here we are going to create a function for twig named "actual_route" from the current fuction 'getActualRoute'

    public function getFunctions(): array
    {
        return [
            new TwigFunction('actual_route', [$this, 'getActualRoute']),
        ];
    }

The getActualRoute will take 2 strings parameters and return active if the current route is equal to the actual :

    public function getActualRoute(string $value, string $route): string
    {
        return $value === $route ? 'active' : '';
    }

Back in the navBar

Last step, we are going to modify our template. We want to put an 'active' class to the current route. First let set a route's variable which are going to contain the name of the actual route. In your twig try to dump this : app.request.attributes.get('_route'). As you can see, you've got the actual route in string. Now let's do it :

{% set route = app.request.attributes.get('_route') %}

<nav>
 <ul>
   <li>
     <a href="{{ path('app_home') }}">Home</a>
   </li>
   <li>
     <a href="{{ path('app_picture') }}">Pictures</a>
   </li>
   <li>
     <a href="{{ path('app_video') }}">Videos</a>
   </li>
   <li>
     <a href="{{ path('app_contact') }}">Contact</a>
   </li>
 </ul>
<nav>

Then for each link write a class, with our function :
<a href="{{ path('app_home') }}" class="{{ actual_route('app_home',route) }}">Home</a>

So it means, if the 'app_home' === route ( what we just set) then, it will be an active class.
Just try it and inspect your element. Now you just need to write some CSS to customize this. For example with SCSS :

a{
 color: black;
 transition:0.3s ease-in-out;
 &.active{
  color:red;
 }
}

Conclusion

I hope it helped you and if you have any questions or improvements, just write it 😊

Cheers !

Login attempt in Symfony under 5.2 version

Mickaël — Sun, 10 Jan 2021 17:48:27 +0000

Symfony 5.2 has feature which allow us to securise our website against multiple login's attempt.
Here is the docs => Login Throttling
But how to do it with an older version ? This is what I'm going to show you next.

The project

For this project, let's say we just created a blog. This blog is only accessible for registered user. An anonymous user will only have access to '/login' and '/register'.
In the register page, to avoid the bad bots, we use a captcha but one captcha is enough, we don't need it for the login page.

I will go right in the hearth of the project so I let you :

Create the project
Do a make:user and make:auth
Write your logic in your controller

And now let's work.

Create a new Entity

So we want to know each connection (successfull or not) to our website. For each connection we want to know the ip address, the mail used and the date.

Lets create an entity. Call it loginAttempt and answer to the question :

New property name (press <return> to stop adding fields):
 > email

 Field type (enter ? to see all types) [string]:
 >


 Field length [255]:
 >

 Can this field be null in the database (nullable) (yes/no) [no]:
 >

 updated: src/Entity/LoginAttempt.php

 Add another property? Enter the property name (or press <return> to stop adding fields):
 > ipAddress

 Field type (enter ? to see all types) [string]:
 >


 Field length [255]:
 >

 Can this field be null in the database (nullable) (yes/no) [no]:
 >

 updated: src/Entity/LoginAttempt.php

 Add another property? Enter the property name (or press <return> to stop adding fields):
 > date

 Field type (enter ? to see all types) [string]:
 > datetime_immutable
datetime_immutable

 Can this field be null in the database (nullable) (yes/no) [no]:
 >

Right, now lets modify the Entity. If you want, you can typehint the variable, I dit it. Delete all the setters, we don't need them and create a constructor. For the constructor we use a string $email and a string $ipAddress, the date will be a new DatetimeImmutable('now'). I personnally added date_default_timezone_set('Europe/Paris') to get the time for France. Your entity should look like this :

class LoginAttempt
{
    /**
     * @ORM\Id
     * @ORM\GeneratedValue
     * @ORM\Column(type="integer")
     */
    private ?int $id = null;

    /**
     * @ORM\Column(type="string", length=255)
     */
    private string $email;

    /**
     * @ORM\Column(type="string", length=255)
     */
    private string $ipAddress;

    /**
     * @ORM\Column(type="datetime_immutable")
     */
    private \DateTimeImmutable $date;

    public function __construct(string $ipAddress, string $email)
    {
        date_default_timezone_set('Europe/Paris');
        $this->ipAddress = $ipAddress;
        $this->email = $email;
        $this->date = new \DateTimeImmutable('now');
    }

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getEmail(): ?string
    {
        return $this->email;
    }

    public function getIpAddress(): ?string
    {
        return $this->ipAddress;
    }

    public function getDate(): ?\DateTimeImmutable
    {
        return $this->date;
    }

}

The LoginformAuthenticator

If you did a make auth, you created the logic for your login, I called this class LoginformAuthenticator, yours has maybe a different name but whatever, go in it.
First just before the constructor add 2 new private variable and call it $ipAddress and EntityManagerInterface $manager and add the manager in your contructor.I will explain you for $ipAddress later.

In this class, 2 methods interess us :

public function getCredentials(Request $request)
public function checkCredentials($credentials, UserInterface $user)

The getCredentials

This method get all the connections. You can try to log and die and dump $credentials, you will access to the mail used, the password not hashed and the csrfToken. Perfect ! This is exactly the logic we want.
So in this method just before the return, add a $newLoginAttempt's variable equal to a new LoginAttempt (our entity). Remember we need in parameter the ip adress and the email. Right, look in your method, we have access to the Request ! So the first parameter is $request->getClientIp() and the second is the credentials. As an array, we need to write $credentials['email].
I want a global variable for ip address so use your private variable $this->ipaddress = $request->getClientIp(), it will be usefull for later.
Now we just need to persist and flush the data. Try to log in and watch your database (login_attempt), you should see the first connection.
Perfect !

Your getCredentials method should look like this :

 public function getCredentials(Request $request)
    {
        $credentials = [
            'email' => $request->request->get('email'),
            'password' => $request->request->get('password'),
            'csrf_token' => $request->request->get('_csrf_token'),
        ];
        $request->getSession()->set(
            Security::LAST_USERNAME,
            $credentials['email']
        );

        $newLoginAttempt = new LoginAttempt($request->getClientIp(), $credentials['email']);

        $this->ipAddress = $request->getClientIp();

        $this->entityManager->persist($newLoginAttempt);
        $this->entityManager->flush();

        return $credentials;
    }

Create a Trait

The logic in our checkCredentials method is a bit too long so I prefer to create a Trait. Call it SecurityLoginAttemptTrait and use it directly in your LoginFormAuthenticator's class just above use TargetPathTrait; to not forget it !.
Back in our Trait, start to create a secure's method with as parameter :

a LoginAttemptRepository $repo
a string $email
a string $ipAddress
an EntityManagerInterface $manager
an UrlGeneratorInterface $url

Then we want to prevent the user from 2 attempts with an error message. The 4th try will be the last and the 5th try will block his Ip address. Start by writting the condition :

if(count($repo->recentLoginAttempts($email)) === 2){
            throw new CustomUserMessageAuthenticationException('3 attempts left');
        }
        if(count($repo->recentLoginAttempts($email)) === 3){
            throw new CustomUserMessageAuthenticationException('2 attempts left');
        }
        if(count($repo->recentLoginAttempts($email)) === 4){
            throw new CustomUserMessageAuthenticationException('Be carefull its your last attempt');
        }

Wow wait, what is the recentLoginAttempts method, the CustomUserMessageAuthenticationException and where is the last attempt ?
Ok hold on, step by step.

The CustomUserMessageAuthenticationException as his name says it is a custom message error for the user. Don't forget to use the 'use statement'

Now let's go in our LoginAttemptRepository and create our recentLoginAttempts method.

The method

We want to know all the connection for an email address from minus 3 minutes to now, so let's write it :

class LoginAttemptRepository extends ServiceEntityRepository
{
    const DELAY_IN_MINUTES = 3;

    public function __construct(ManagerRegistry $registry)
    {
        parent::__construct($registry, LoginAttempt::class);
    }

    public function recentLoginAttempts(string $email)
    {
        date_default_timezone_set('Europe/Paris');
        $timeAgo = new \DateTimeImmutable(sprintf('-%d minutes', self::DELAY_IN_MINUTES));

        return $this->createQueryBuilder('l')
            ->andWhere('l.date >= :date')
            ->andWhere('l.email = :email')
            ->setParameter('date', $timeAgo)
            ->setParameter('email', $email)
            ->getQuery()
            ->getResult()
        ;
    }

Now you should understand ours conditions. For example :

if(count($this->repo->recentLoginAttempts($email)) === 3){
            throw new CustomUserMessageAuthenticationException('2 attempts left');
        }

I will count all the times an user try to connect to our website between minus 3 minutes to now. If the total is equal to 3 then he will get a new custom message.
Let's write the last condition but before to do it, we need to create a new Entity.

The last Entity

If an user try to connect 5 times in 3 minutes or less then his ip address will be block in our site. So create an entity IpBlocked with 2 properties :

ipAddress (string)
blockedAt (datetime_immutable)

Delete all the setters and make a constructor with a string $ipAddress and make automatic the property's blockedAt.

Your entity should look like this :

<?php

namespace App\Entity;

use App\Repository\IpBlockedRepository;
use Doctrine\ORM\Mapping as ORM;

/**
 * @ORM\Entity(repositoryClass=IpBlockedRepository::class)
 */
class IpBlocked
{
    /**
     * @ORM\Id
     * @ORM\GeneratedValue
     * @ORM\Column(type="integer")
     */
    private ?int $id = null;

    /**
     * @ORM\Column(type="string", length=255)
     */
    private string $ipAddress;

    /**
     * @ORM\Column(type="datetime_immutable")
     */
    private \DateTimeImmutable $blockedAt;

    public function getId(): ?int
    {
        return $this->id;
    }

    public function getIpAddress(): ?string
    {
        return $this->ipAddress;
    }

    public function __construct(string $ipAddress)
    {
        date_default_timezone_set('Europe/Paris');
        $this->ipAddress = $ipAddress;
        $this->blockedAt = new \DateTimeImmutable('now');
    }

    public function getBlockedAt(): ?\DateTimeImmutable
    {
        return $this->blockedAt;
    }

}

Back in our trait we can now write the last condition :

if(count($repo->recentLoginAttempts($email)) === 5){
            $blocked = new IpBlocked($ipAddress);
            $manager->persist($blocked);
            $manager->flush();
            return $url->generate('app_account_blocked');
        }

So if an user try to connect for the 5th times then we call a new Ipblocked with $ipAddress in parameter, then we persist and flush $blocked and we return a redirection ( we are going to create it).

Your Trait should look like this :

<?php


namespace App\helper;


use App\Entity\IpBlocked;
use App\Repository\LoginAttemptRepository;
use Doctrine\ORM\EntityManagerInterface;
use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
use Symfony\Component\Security\Core\Exception\CustomUserMessageAuthenticationException;

trait SecurityLoginAttemptTrait
{

    public function secure(LoginAttemptRepository $repo,string $email, string $ipAddress, EntityManagerInterface $manager, UrlGeneratorInterface $url)
    {
        if(count($repo->recentLoginAttempts($email)) === 2){
            throw new CustomUserMessageAuthenticationException('Il vous reste 3 essais');
        }
        if(count($repo->recentLoginAttempts($email)) === 3){
            throw new CustomUserMessageAuthenticationException('Il vous reste 2 essais');
        }
        if(count($repo->recentLoginAttempts($email)) === 4){
            throw new CustomUserMessageAuthenticationException('Attention c\'est votre dernier essai !');
        }
        if(count($repo->recentLoginAttempts($email)) === 5){
            $blocked = new IpBlocked($ipAddress);
            $manager->persist($blocked);
            $manager->flush();
            return $url->generate('app_account_blocked');
        }
    }

}

Back to the LoginFormAuthenticator

Before working in our checkCredentials method, create a new private LoginAttemptRepository $repo and add it in the constructor.
Now lets go in the method and before the return call our secure method. Remember we need in parameters :

the LoginAttemptRepository
the email
the ip address
the EntityManagerInterface
the UrlGeneratorInterface

So we can write $this->secure($this->repo,$credentials['email'], $this->ipAddress, $this->entityManager, $this->urlGenerator);

And that's it, our logic is done. If an user try to connect 5 times in 3 minutes or under then his ip address will be in our database.

Finally

We want to block the user's access from our website. Remember an anonymous user can only access to '/login' and '/register'. Then go in your login and register's controller and in paramaters add:
IpBlockedRepository $ipBlockedRepo
Request $request
then as first line write your condition :

if ($ipBlockedRepo->findOneBy(['ipAddress' => $request->getClientIp()])){
            return $this->redirectToRoute('app_account_blocked');
        }

With this logic, the user will not be able to connect or register. Of course you need to create the new route 'app_account_blocked' but that's the easiest thing to do.
First start by creating a new Controller by making symfony console make:controller AccountBlockedController
Then we don't want people can access to this page if their IP is not blocked, so add the same parameters than RegisterController and LoginController and this time in first line write :
if (!$ipBlockedRepo->findOneBy(['ipAddress' => $request->getClientIp()])){ return $this->redirectToRoute('app_login'); }
Your controller should look like this :

<?php

namespace App\Controller;

use App\Repository\IpBlockedRepository;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class AccountBlockedController extends AbstractController
{
    /**
     * @Route("/access-blocked", name="app_account_blocked")
     */
    public function index(IpBlockedRepository $ipBlockedRepo, Request $request): Response
    {
        if (!$ipBlockedRepo->findOneBy(['ipAddress' => $request->getClientIp()])){
            return $this->redirectToRoute('app_login');
        }
        return $this->render('account_blocked/index.html.twig', [
            'controller_name' => 'AccountBlockedController',
        ]);
    }
}

And don't forget to personalize your template and let the user know why his access is forbidden.
For example you could say :" You don't have access to this website, please contact the admin to find a solution "
And you can of course let all the user blocked have access to your contact page.

I hope you liked this article and if you have any question or any improvement, just let me know

Cheers !

Symfony UX and ChartJS

Mickaël — Tue, 08 Dec 2020 13:27:48 +0000

Few days ago, Symfony published an article about a new way to implement some JS library and make the work easier for us.
For the moment we have 5 packages :

Today I'm gonna implement Chart.js in a little project. The goal is to show you the simple way to use it. Let's start !!!

Create the project

We need Symfony flex so just create a new full project.

 symfony new Chart-js-project --full

Then install webPackEncore and Yarn (or npm).

composer require symfony/webpack-encore-bundle
yarn install

Now WebpackEncore is installed, go to your template folder and find base.html.twig.
In your stylesheets block add

{{ encore_entry_link_tags('app') }}

and in your javascripts block add

{{ encore_entry_script_tags('app') }}.

Create our entity

We need data for chart.js so we are going to create an entity. Mmmh let's say we need to know (for some reasons) how many croissant🥐 we eat every day.To go faster I will use maker so let's do it.
symfony console make:entity Croissant
Our first field will be the number of croissant we eat every day and the second the date of day and both will not be null

 New property name (press <return> to stop adding fields):
 > number

 Field type (enter ? to see all types) [string]:
 > int
integer

 Can this field be null in the database (nullable) (yes/no) [no]:
 >

 updated: src/Entity/Croissant.php

 Add another property? Enter the property name (or press <return> to stop adding fields):
 > date

 Field type (enter ? to see all types) [string]:
 > datetime
datetime

 Can this field be null in the database (nullable) (yes/no) [no]:

Cool our entity is created. Now we need to create our Database. I let you configurate yours in the .env file.

Still with maker we are going to create and migrate in the database with those 3 lines:
symfony console d:d:c
symfony console make:migration
symfony console d:m:m
Check your database, you should see your entity.

CRUD

Its a quick project so I will continue with maker. Let's create our crud
symfony console make:crud
and at the question The class name of the entity to create CRUD, say Croissant.
Finally, our entity and the database are created and our CRUD is ready. Now let's create some fake data.

Run your server and go to the page /croissant/new. For me its http://127.0.0.1:8000/croissant/new
Then add as much data as you want. Now let's create our graph

Add Chart.js with Symfony UX

Right now, we just follow the docs.
Start by adding those lines in your CLI:

composer update symfony/flex
yarn upgrade "@symfony/webpack-encore@^0.32.0"
composer recipes:install symfony/webpack-encore-bundle --force -v

Then install the bundle composer require symfony/ux-chartjs

I choose to create my graph in the index page, so go to your CroissantController and in your index function start by injecting ChartBuilderInterface $chartBuilder

For the example we copy the code from the docs. Your controller should look like this :

use Symfony\UX\Chartjs\Builder\ChartBuilderInterface;
use Symfony\UX\Chartjs\Model\Chart;

    /**
     * @Route("/", name="croissant_index", methods={"GET"})
     */
    public function index(CroissantRepository $croissantRepository, ChartBuilderInterface $chartBuilder): Response
    {
        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
        $chart->setData([
            'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            'datasets' => [
                [
                    'label' => 'My First dataset',
                    'backgroundColor' => 'rgb(255, 99, 132)',
                    'borderColor' => 'rgb(255, 99, 132)',
                    'data' => [0, 10, 5, 2, 20, 30, 45],
                ],
            ],
        ]);

        $chart->setOptions([/* ... */]);

        return $this->render('croissant/index.html.twig', [
            'croissants' => $croissantRepository->findAll(),
            'chart' => $chart,
        ]);
    }

For the moment you see nothing but just go in your index template and add where you want ( I just place it below the block body) {{ render_chart(chart) }}
Now if you go to http://127.0.0.1:8000/croissant/, you should see a graph. Of course the data is not ours but you're gonna work on it.

Adding our data

So what we need to display our data ? We need the number of croissant we ate and the day we did it.
We are going to modify the 'labels' with the date of our data and 'data' with the number of croissant we ate.
Start by creating 2 empty arrays.

$labels = [];
$datasets = [];

Then we fetch all the data by doing $repo = $croissantRepository->findAll();.
Ok, now, foreach data we want the date and the number of croissants. So let's do the loop and adding the data in our variables:

foreach($repo as $data){
            $labels[] = $data->getDate()->format('d-m-Y');
            $datasets[] = $data->getNumber();
        }

For the date I choose the French format 🥐🥖🍷🧀.
And now, just replace the fake data in 'labels' by $labels and the fake data in 'data' by $datasets.And that's it, now if you go to http://127.0.0.1:8000/croissant/ you will see your wonderfull graph. Just modify the style and personalize it as you want. You can add some options if you want but for this example I choose to not add it and I deleted it.
Your final code should look like this :

/**
     * @Route("/", name="croissant_index", methods={"GET"})
     */
    public function index(CroissantRepository $croissantRepository, ChartBuilderInterface $chartBuilder): Response
    {
        $labels = [];
        $datasets = [];
        $repo = $croissantRepository->findAll();
        foreach($repo as $data){
            $labels[] = $data->getDate()->format('d-m-Y');
            $datasets[] = $data->getNumber();
        }
        $chart = $chartBuilder->createChart(Chart::TYPE_LINE);
        $chart->setData([
            'labels' => $labels,
            'datasets' => [
                [
                    'label' => 'My First dataset',
                    'backgroundColor' => 'rgb(255, 99, 132)',
                    'borderColor' => 'rgb(255, 99, 132)',
                    'data' => $datasets,

                ]
            ],
        ]);
        return $this->render('croissant/index.html.twig', [
            'croissants' => $croissantRepository->findAll(),
            'chart' => $chart,
        ]);
    }

You can change the look of your graph by changing the Chart::TYPE_LINE by an other type. This is the list :
*TYPE_LINE
*TYPE_BAR
*TYPE_RADAR
*TYPE_PIE
*TYPE_DOUGHNUT
*TYPE_POLAR_AREA
*TYPE_BUBBLE
*TYPE_SCATTER

I hope you liked the article 😉

That's all folks !

How to automatically login customer after registration with Symfony

Mickaël — Thu, 01 Oct 2020 16:21:01 +0000

A lot of websites allow you to be logged just after registration and I think that great for the user experience. So today I will show you how to do it with Symfony.

Basic configuration

Both Symfony and composer should be installed. If you use the light version of SF, make sure you have the maker bundle installed because I will use it.
And that's it 😊

Let's start

First I'm going to use : php bin/console make:user

//I leave User by default
 The name of the security user class (e.g. User) [User]:
 >
// Yes I want to store it
 Do you want to store user data in the database (via Doctrine)? (yes/no) [yes]:
 >
//Default value (email) is good
 Enter a property name that will be the unique "display" name for the user (e.g. email, username, uuid) [email]:
 >
// Yes I want to hash password and I let SF do it for me
 Will this app need to hash/check user passwords? Choose No if passwords are not needed or will be checked/hashed by some other system (e.g. a single sign-on server).

 Does this app need to hash/check user passwords? (yes/no) [yes]:
 >

Our entity is now ready. Symfony just created both User Entity and UserRepository.
Now let's add the authentification by using :
php bin/console make:auth

// I choose 1 for the complete authenticator
 What style of authentication do you want? [Empty authenticator]:
  [0] Empty authenticator
  [1] Login form authenticator
 > 1
1
//I prefer to call it LoginFormAuthenticator
 The class name of the authenticator to create (e.g. AppCustomAuthenticator):
 > LoginFormAuthenticator
//It's fine for me
 Choose a name for the controller class (e.g. SecurityController) [SecurityController]:
 >
//Yes I want a logout URL
 Do you want to generate a '/logout' URL? (yes/no) [yes]:
 >

Now we've got 4 folders in our src :
Controller

SecurityController.php

Entity

User.php

Repository

UserRepository.php

Security

LoginFormAuthenticator.php

Let's check the last one. As you can see, there are all the logics for the authentification. You can modify the parameters you want. For example here you can change the error message when the email is wrong :

 public function getUser($credentials, UserProviderInterface $userProvider)
    {
        $token = new CsrfToken('authenticate', $credentials['csrf_token']);
        if (!$this->csrfTokenManager->isTokenValid($token)) {
            throw new InvalidCsrfTokenException();
        }

        $user = $this->entityManager->getRepository(User::class)->findOneBy(['email' => $credentials['email']]);

        if (!$user) {
            // fail authentication with a custom error
            throw new 
CustomUserMessageAuthenticationException('Email could not be found.');
        }

        return $user;
    }

When the User is logged, I would like to redirect him to the home page. Lets pretend we've already created the HomeController with the name: "app_home".
In LoginFormAuthenticator.php there is a onAuthenticationSuccess's function. I will change the default value with a redirection to the homepage

public function onAuthenticationSuccess(Request $request, TokenInterface $token, string $providerKey)
    {
        if ($targetPath = $this->getTargetPath($request->getSession(), $providerKey)) {
            return new RedirectResponse($targetPath);
        }
//I will delete the below line
        throw new \Exception('TODO: provide a valid redirect inside '.__FILE__);
//And replace it by this one
return new RedirectResponse($this->urlGenerator->generate('app_home'));
    }

Great now our users will be redirect to the homepage. Let's finish it. Create a new RegisterController and the form ( I guess you know how to do it 😉).
I called my form RegisterType. So now thanks to the autowiring I am going to allow the user to be logged after registration. I will use autowiring for the Request, EntityManager,UserPasswordEncoderInterface, LoginFormAuthentificator and GuardAuthenticatorHandler :

/**
     * @Route("/register", name="app_register")
     */
    public function registration(Request $request, EntityManagerInterface $manager,UserPasswordEncoderInterface $passwordEncoder, LoginFormAuthentificator $login, GuardAuthenticatorHandler $guard)
    {
//Basic code for registration
        $user = new User();
        $form = $this->createForm(RegisterType::class, $user);
        $form->handleRequest($request);
//I always use a unmapped plainPassword for the real password
        if ($form->isSubmitted() && $form->isValid()){
            $user->setPassword($passwordEncoder->encodePassword($user, $form['plainPassword']->getData()));

            $manager->persist($user);
            $manager->flush();
//Just to be UX, I had a flash message
            $this->addFlash('success', 'The registration is successfull');
//This is how the User could be logged after the registration
//Guard handle it
//'main' is your main Firewall. You can check it in config/packages/security.yaml
            return $guard->authenticateUserAndHandleSuccess($user,$request,$login,'main');
        }

        return $this->render('security/registration.html.twig', ['form' => $form->createView(),]);
    }

This is how to do it with SF, I hope it's gonna help you in your future registration !

That's all folks 😁