DEV Community: Funke Olasupo

How I Learnt To Code & Got A Developer Job

Funke Olasupo — Sat, 15 Oct 2022 00:55:42 +0000

Introduction

Every time I reminisce about my developer journey, It always leaves me grateful. It dares me to be more and keep chasing my software engineering goals.
I got introduced to tech during a summer program in 2017 by Keeping It Real Foundation. The first tool I learned to use was a low-code tool (content management system) called WordPress.

I learned to use WordPress to build static websites and blog pages. I used it for a while and moved on to learning how to write code. I wrote my first "Hello World" in *HTML *(Hyper Text Markup Language). I also learned a bit of *CSS *(Cascading Style Sheet) alongside. I started building websites from designs with HTML and CSS.

The Role of Communities In My Journey

Communities have been an integral part of my technical growth. Starting to code, I joined a community called "Inventors". They guided my learning path from HTML to CSS and then Javascript. I learned to build confidence in my skill in these various languages although I was still a beginner.

I moved on to learn a server-side language. It was an attempt to understand backend engineering because I wasn't so thrilled with doing front-end.😊 I started with PHP and hooked up with Laravel(a PHP framework) until today 🥰.
While trying to build my Backend Engineering skills, I got to learn a bit about database management and cloud services.

During this phase, I joined another community called SheCodeAfrica. We had weekly tasks and assignments on different backend concepts in the backend channel. This helped to improve my skills over time. It also taught me a lot through research for those weekly tasks about my career path.

I started looking for internships and hands-on projects to build work experience, and I decided to put myself out there. I became more vocal about my skills, telling people what I do. I also publicized myself and followed social media content related to my career.

Someone reached out to me within the community to volunteer for an Edu-tech organization called CodeVixens Academy. I jumped on that opportunity to gain more experience and develop my skills. This experience was peculiar to me because I didn't just learn how to code but how to follow standard & modern engineering practices. A few weeks later, I had the opportunity to interview for an entry-level role recommended by the organization's founder. That was how I got my first developer job. 💃

Technical Writing & Open Source: An Instrumental Tool for my Technical Growth

Moving on, I wanted to be intentional with documentation. As a Backend Engineer, How do I build APIs without proper documentation?
I also wanted to contribute to open source and document the bugs(errors) I encountered during my learning process and the solutions I discovered.

I started writing "How-To-Guides", Articles, and Tutorials on different backend engineering & open-source concepts. I realized that my research and learning rate increased due to this.

I got reached out to by a company on LinkedIn to write backend articles for them and get paid for it (sounds impressive, right😁?).

This was how Technical Writing became an entire career for me. I started paying more attention to advocating for good documentation, especially API documentation.

Taking another bold step into open source, I looked out for open source projects that needed improvement on their documentation and started contributing to them. I also got the opportunity to participate in Google Season Of Docs for an open-source organization.
Technical documentation significantly improved my engineering skills because you can not document what you don't understand. I will always be glad that I took this step.

In my quest for open-source projects, I became intentional in actively participating during Hacktoberfest. Then, I found Aviyel and got the amazing opportunity to share my coding journey.

Conclusion

One of the things I have learned to overcome during my journey is "Tutorial Hell". While learning a new language or concept, we start with tutorials( especially video tutorials). Most times, we end up wanting to watch more tutorials about the entire concept. This cycle never ends because you think you won't be a good engineer if you don't watch a complete tutorial on backend engineering.
However, you will end up stuffed with too much information you can not recreate. The best way to learn is to build. A tutorial should introduce you to basic concepts on that topic, then pick a project and build on it. This way, you realize that you learn better as you keep building. You also do better research to implement as you keep building.

This is just a brief highlight of my journey and how communities and open source helped my journey as a developer. I look forward to sharing more about this journey and how I have grown over the years. I hope you learn something from this.

Oauth Authentication In Laravel: Social Login With Laravel Socialite

Funke Olasupo — Wed, 06 Jul 2022 03:41:20 +0000

This article was originally published on Honeybager Blog.

The importance of authentication in software engineering cannot be overemphasized. This article discusses the topic in relation to Laravel. It briefly describes OAuth and its implementation in Laravel.
Here are a few things you'll learn:

What is OAuth?
OAuth 1.0 vs OAuth 2.0.
OAuth server implementation in Laravel(Laravel Passport).
What is Social Login..
What is Laravel Socialite.
How to implement Social Login with Laravel Socialite.

Introduction

There is a common misconception that OAuth is an Authentication protocol. Although OAuth doesn't provide Authentication, it does provide Authorization.
Authentication is the act of validating that users are who they claim by using, for example, a password and username, biometrics, and one-time pins.
In system security, Authorization is the process of giving the user permission to access a specific resource or function.
OAuth is utilized in a wide variety of applications, including providing mechanisms for user authentication. This has driven numerous developers and API providers to erroneously conclude that OAuth is itself a confirmation convention and erroneously utilize it as such.

A full authentication protocol will likely tell you a number of attributes about a user, such as a unique identifier, an email address, and whether that user is present in the app, but OAuth does nothing of the sort. It isn't concerned with either the user or their attributes or presence; it simply asks for a token, gets the token, and uses it to request some resources. This is why it is dangerous to use as a form of authentication.
For example, you can tell Facebook that it’s OK for Hashnode.com to access your profile or post updates to your timeline without having to give Hashnode your Facebook password. This minimizes risk in a major way, therefore if Hashnode suffers a breach, your Facebook password remains safe.

What Is OAuth?

OAuth stands for Open Authorization. OAuth is an open standard for delegating access, commonly utilized as a way for Web clients to allow websites or applications to get to their data on other websites without giving them passwords.

It is a verification convention that permits you to endorse one application interacting with another application on your behalf without giving away your password.

It is neither an API nor a service but an open standard that can be implemented by anyone, which apps can utilize to supply client applications with “secure designated access”. OAuth works over HTTPS and authorizes gadgets, APIs, servers, and applications with access tokens instead of credentials.

How does OAuth Work?

OAuth fundamentally grants access tokens to be allotted to third-party clients by an authorization server, with the endorsement of the resource owner, and in turn, the clients use these token to access secured data, facilitated by the resource server.

Let’s look at the scenario of trying to sign in with Google(a service provider) on GitHub(a consumer application). First, GitHub seeks permission from Google by requesting a Client key and Secret. This helps Google verify that GitHub has access to request resources. Once its verified, the user is redirected to Google to decide whether to log in. If the user logs in, he or she gives GitHub permission to use his or her resources stored by the service provider(Google). Thereafter, GitHub (the consumer application) obtains an access token for use in making a request to the protected resource on Google(the service provider). Tokens come with access authorization for the API. These authorizations are called scopes, and each token has an authorized scope for each API. GitHub can access Google only to the degree defined in the scope.

OAuth 1.0 vs. OAuth 2.0

In recent times, when we refer to OAuth, we reference OAuth 2.0 automatically since OAuth 1.0 depreciated a long time ago. OAuth 1.0 was published in April 2010, and OAuth 2.0 was published in October 2012.

OAuth 2.0 is a total modification of OAuth 1.0, excluding nothing and sharing only general goals and user experience. OAuth 2.0 isn't backwards compatible with OAuth 1.0 or 1.1 and ought to be thought of as a totally modern convention. This means that if you build an app with OAuth 2.0, it belongs to 2.0 since 1.0 has depreciated.

Cryptography

OAuth 1.0 required crypto-implementation and crypto-interoperability. Although it was secure, it was a challenge for numerous developers to implement.

Building a secure OAuth solution is not a simple challenge. Large enterprises joined the OAuth standard body and impacted it in numerous ways. Whereas OAuth 2.0 is much simpler to actualize than OAuth 1.0 and its crypto underpinnings, the new version contains numerous compromises at the security level.

Clean Separation of Roles

OAuth2 can be characterized as a resource server (API) with an authorization server. This implies that there's a clear division of parts between the server handling the authorization request and the server producing access-control choices based on the response to the authorization request. This separation permits support for more adaptable use cases.

For example, Google’s OAuth 2.0 implementation uses a server at “accounts.google.com” for authorization requests but uses “www.gooogleapis.com” when making requests to the Google+ API.

Better Support for Non-Browser-Based Applications

This is often the primary feedback against OAuth from client applications that were not browser-based. For case, in OAuth 1.0, desktop applications or versatile phone applications had to coordinate with the user to open their browser to achieve the required benefit, verify the service, and duplicate the token from the benefit back to the application. The limitation here is the user experience. With OAuth 2.0, there are other ways for an application to induce authorization for a client. This was one of the main advantages OAuth2 has over OAuth1. However, abuse of this flows in favor of convenience and ease can lead to insecure implementations of OAuth2.

Bearer Token vs Access Token

In OAuth1, there are two parts to the access token, a public and a private string. The most common way of getting to OAuth 2.0 APIs is employing a “bearer token”, which acts as the authentication of the API request, sent in an HTTP “Authorization” header. It's an easier way to make API requests since it doesn’t require the cryptographic signing of every request.

The advantage is that it doesn’t require complex libraries to make requests and is much easier for both clients and servers to implement. The drawback is that there's nothing preventing other apps from using a Bearer token if they can get access to it.

Therefore, this is a common criticism of OAuth2. However, if applications properly protect the access tokens under their control, this is not a problem, although technically it is less secure.If your service requires a more secure approach, you can use a different access token type that may meet your security requirements.

Which is the best, OAuth1 or OAuth2?

All these stated factors appear indicate that OAuth2 is superior to OAuth1 and that OAuth1 is obsolete. This isn't the case. It is exceptionally uncommon to see a recently developed authorization system utilizing OAuth1.

The major organization that still fully supports OAuth 1.0 is Twitter; they call their version OAuth1.0a. However, when security is concerned, OAuth1 is still reasonable and may be more secure than OAuth2 since it offers extra security on top of TLS-based precautions and creates obstructions in potentially compromising flows.

An existing application that uses OAuth1 likely does not have to be upgraded to OAuth2. New systems that depend on server-to-server authorization may likely use OAuth1 for the extra security. However, use cases that seem advantageous from a separation of concerns, non-browser support, and advancement ought to utilize OAuth2.

OAuth Server Implementation in Laravel

Laravel Passport facilitates full OAuth2 server implementation for Laravel Apps in less time. Developing an OAuth2 server from scratch can be tedious and time-consuming, but Laravel Passport is a local OAuth 2 server for Laravel apps. The Laravel Passport package embodies routes, middleware, and database migrations to develop an authorization server that will return access tokens for giving access permission to server resources. It uses the League OAuth2 Server package as a dependency and has a straightforward, easy-to-learn, and easy-to-implement language structure.

What Is Social Login?

Social login, also called social sign-in or social sign-on, allows users to log in and register with a single click on a client application utilizing their existing accounts from various social service providers.

It is a single sign-on (SSO) advancement that allows users to verify themselves on diverse applications by connecting through a social media site rather than providing a separate ID and password on each website.

Essentially, it uses data from social networking sites to improve logins on third-party applications. It is designed to simplify the sign-in and registration experience, providing a convenient alternative to obligatory account creation. This basically means that users should be able to sign up or sign in with any of their social accounts.

It can be advantageous for third-party applications that need to get a users’ profile data, such as a profile picture or email address. However, it can be a drawback since it isn't considered a secure method of authentication and should never be used for authentication of any site with any form of sensitive information.

Social Login in Laravel (Laravel Socialite)

Laravel also provides a basic and helpful way to verify with OAuth providers utilizing Laravel Socialite. Socialite currently supports authentication with Facebook, Twitter, LinkedIn, Google, GitHub, GitLab, and Bitbucket.

How can Social Login be implemented with Laravel Socialite?

In this guide, I’ll be using Laravel Socialite to implement social login for Google, Facebook, and GitHub. This topic will be divided into two sub-sections, as follows.

Create an Authentication UI Scaffold

Step 1: Create a new Laravel Project

You can create a new Laravel project via the Composer command or the Laravel installer:

laravel new project_name   
or
composer create-project laravel/laravel project_name

Step 2: Connect to your database

Here is an article I wrote that explains how to connect a Laravel Application to a MySQL database. If you have a different database, make sure to connect it appropriately.

Step 3: Install Laravel/UI

composer require laravel/ui

Step 4 : Create a Bootstrap AUTH Scaffold

A bootstrap authentication scaffold provides a UI and basic authentication for registration and login. You can install it with the Artisan command:

php artisan ui bootstrap --auth

Step 5: Install NPM Packages

npm install

Step 6: Run NPM environment

npm run dev

Step 7: Update the Login page

Provide the buttons for users to log in with their social accounts on resources\views\auth\login.blade.php.

Note that we put the URL routes in the login buttons.

@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Login') }}</div>
<div class="card-body">
 <form method="POST" action="{{ route('login') }}">
     @csrf
    <div class="form-group row">
    <div class="col-md-6 offset-md-3">
      <a href="{{route('login.google')}}" class="btn btn-danger btn-block">Login with Google</a>
      <a href="{{route('login.facebook')}}" class="btn btn-primary btn-block">Login with Facebook</a>
      <a href="{{route('login.github')}}" class="btn btn-dark btn-block">Login with Github</a>
   </div>
   </div>   
</form>
</div>
</div>
</div>
</div>
</div>
@endsection

Step 8: Run the application

You can serve the Laravel application with the following Artisan Command:

php artisan serve

Step 9: Hit this URL on your browser

http://localhost:8000/login

You should be able to view the login page:

Create Social Login with Socialite

Step 1: Install the Laravel Socialite package

Use the Composer package manager to add the package to your project's dependencies:

composer require laravel/socialite

Step 2: Set up routes

Since we are dealing with views, our routes will be in routes\web.php.

To authenticate users using an OAuth provider, you will need two routes: one for redirecting the user to the OAuth provider and another for receiving the callback from the provider after authentication.

//Google
Route::get('/login/google', [App\Http\Controllers\Auth\LoginController::class, 'redirectToGoogle'])->name('login.google');
Route::get('/login/google/callback', [App\Http\Controllers\Auth\LoginController::class, 'handleGoogleCallback']);
//Facebook
Route::get('/login/facebook', [App\Http\Controllers\Auth\LoginController::class, 'redirectToFacebook'])->name('login.facebook');
Route::get('/login/facebook/callback', [App\Http\Controllers\Auth\LoginController::class, 'handleFacebookCallback']);
//Github
Route::get('/login/github', [App\Http\Controllers\Auth\LoginController::class, 'redirectToGithub'])->name('login.github');
Route::get('/login/github/callback', [App\Http\Controllers\Auth\LoginController::class, 'handleGithubCallback']);

Step 3: Configure service providers

You will need to add credentials for the OAuth providers your application utilizes. These credentials should be in your application's config/services.php configuration file before using socialite.

'google' => [
   'client_id' => env('GOOGLE_CLIENT_ID'),
   'client_secret' => env('GOOGLE_CLIENT_SECRET'),
   'redirect' => 'your_redirect_url',
],
'facebook' => [
   'client_id' => env('FACEBOOK_CLIENT_ID'),
   'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
   'redirect' => 'your_redirect_url',
],
'github' => [
   'client_id' => env('GITHUB_CLIENT_ID'),
   'client_secret' => env('GITHUB_CLIENT_SECRET'),
   'redirect' => 'your_redirect_url',
],

Note that the redirect value should be the callback URL you set at the Service Providers and at your routes.

Step 4: Set CLIENT_ID and CLIENT_SECRET in the `.env` file

CLIENT_ID and CLIENT_SECRET should not be in any public directory, so they should be stored as environment variables.

  GOOGLE_CLIENT_ID=
  GOOGLE_CLIENT_SECRET=

  FACEBOOK_CLIENT_ID=
  FACEBOOK_CLIENT_SECRET=

  GITHUB_CLIENT_ID=
  GITHUB_CLIENT_SECRET=

Note that after creating each App on the various Service Providers, this is where the CLIENT_ID and CLIENT_SECRET values should be placed.

Step 5: Set up LoginController

LoginController is at the app\Http\Controllers\Auth\LoginController.php directory. First , let’s define a _registerOrLoginMethod(), which will log in returning users or register new users. This takes place when they are redirected to callback from a successful authentication on the Service Provider.

protected function _registerOrLoginUser($data){
$user = User::where('email',$data->email)->first();
  if(!$user){
     $user = new User();
     $user->name = $data->name;
     $user->email = $data->email;
     $user->provider_id = $data->id;
     $user->avatar = $data->avatar;
     $user->save();
  }
Auth::login($user);
}

Furthermore, we can now define the different methods we set in the routes for the different Service Providers:

//Google Login
public function redirectToGoogle(){
return Socialite::driver('google')->stateless()->redirect();
}

//Google callback  
public function handleGoogleCallback(){

$user = Socialite::driver('google')->stateless()->user();

  $this->_registerorLoginUser($user);
  return redirect()->route('home');
}

//Facebook Login
public function redirectToFacebook(){
return Socialite::driver('facebook')->stateless()->redirect();
}

//facebook callback  
public function handleFacebookCallback(){

$user = Socialite::driver('facebook')->stateless()->user();

  $this->_registerorLoginUser($user);
  return redirect()->route('home');
}

//Github Login
public function redirectToGithub(){
return Socialite::driver('github')->stateless()->redirect();
}

//github callback  
public function handleGithubCallback(){

$user = Socialite::driver('github')->stateless()->user();

  $this->_registerorLoginUser($user);
  return redirect()->route('home');
}

The redirect method provided by the Socialite façade takes care of redirecting the user to the OAuth provider, while the user method will read the incoming request and retrieve the user's information from the provider after they are authenticated.

Step 6: Create an App for Google, Facebook, and GitHub

Here are few clips that briefly describe how to create an App on the different Service Providers, obtain the OAuth Client_ID and Client_Secret, and put them in an .env file.

Thereafter , we need to clear the configuration cache since we updated our environment variables.

Use the following Artisan command:

php artisan config:cache

Step 7: Update migrations for the `users` table

The migrations file is at database\migrations\2014_10_12_000000_create_users_table.php the directory. We need to add columns for provider_id and avatar in the up() method if the user logged in with one of his or her social accounts.

public function up()
{
  Schema::create('users', function (Blueprint $table) {
  $table->id();
  $table->string('name');
  $table->string('email')->unique();
  $table->string('provider_id')->nullable();
  $table->string('avatar')->nullable();
  $table->timestamp('email_verified_at')->nullable();
  $table->string('password')->nullable();
  $table->rememberToken();
  $table->timestamps();
});
}

Now, run the migrations again with this Artisan command:

php artisan migrate:fresh

Step 8: Add the users’ avatars beside their name in the navbar

When a user logs in with his or her social account, we obtain their username and avatar, along with other credentials.

We need to display the avatar beside the username after the user logs in successfully. The nav-item dropdown in the resources\views\layouts\app.blade.php directory will be updated like this:

<li class="nav-item dropdown">
 <img src="{{Auth::user()->avatar}}" alt="{{Auth::user()->name}}">
   <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" 
   role="button" data-toggle="dropdown" 
   aria-haspopup="true" aria-expanded="false" v-pre>
              {{ Auth::user()->name }}
  </a>

 <div class="dropdown-menu dropdown-menu-right" 
       aria-labelledby="navbarDropdown">
  <a class="dropdown-item" href="{{ route('logout') }}" 
     onclick="event.preventDefault();  
       document.getElementById('logout-form').submit();">
            {{ __('Logout') }}
      </a>
  <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                               @csrf
  </form>
</div>
</li>

Hurrah 😎! We are done building 👍. Now, let’s perform some testing and see if it works.

Testing

Before testing, here are few important points to note:

The user selects the social account to log in with and is redirected to the Service Provider.
After successful authentication on the Service Provider, the user is logged in and redirected to his or her dashboard.
If the user isn’t registered, he or she will be registered and logged in automatically after successful authentication on the Service Provider because of the _registerOrLogin() method we defined in LoginController.

Here is a short clip that describes how to test everything we’ve built so far:

Testing Laravel Socialite

Note that I’ve used my personal social accounts to test it, and they all have the same email; therefore, I had to delete it from the database before using it again to test another social account.

Conclusion

Thank you so much for following along with this guide. I hope it serves you well. The entire code for this is open source and available here on GitHub, so you can check it out for further clarification.

For further information, review the Laravel Socialite documentation.

I am open to questions, contributions, and conversations on better ways to implement this, so please use the comment box or DM me @twitter.

Thanks for reading 🤝.

Send Emails In Laravel 8 Using Gmail's SMTP Server

Funke Olasupo — Fri, 26 Nov 2021 23:43:09 +0000

Sending email has become an essential part of modern web applications. For example, they are a great way to communicate with users, when they register, when verifying registrations, and when resetting passwords.

So in this tutorial, you will learn how to send emails in Laravel using a Gmail SMTP server.

Overview

In certain circumstances, your local server may not send emails when using the default PHP mail() method, or it may make it quite problematic to do so. In such scenarios, using a dedicated email library, such as Symfony's Mailer component, can be a practical alternative.

You could also use one of the many email drivers which Laravel supports, including Mailgun, Amazon SES, and Postmark, and of course, Twilio's own SendGrid. However, in this tutorial, you'll learn how to configure Laravel to send emails using Gmail's SMTP server instead.

You're going to create an API for newsletter subscriptions. The user will subscribe to the newsletter by submitting their email address. After doing so, their email address will be stored in the database, and they are sent a “Thank you for subscribing” mail.....Read More

How To Fetch Resources Randomly in Laravel with a Single Line Of Code.

Funke Olasupo — Mon, 05 Jul 2021 16:29:38 +0000

Have you encountered a challenge where you need to fetch records from the database in no particular order using Laravel?

I found myself at this point once and here is how I solved it. All thanks to dear Google!😍

This is a regular SQL query to fetch records randomly:

select * from `users` order by RAND() ```



But in Laravel, there is a method named

 ```inRandomOrder()```

 which simply fetches the records in random order.

Here is a list of the few ways this method can be used:




```PHP

//Fetch all records in random order
Model::inRandomOrder()->get();

// 5 indicates the number of records
Model::inRandomOrder()->limit(5)->get();

//Fetc all records in pages or sets of 6
Model::inRandomOrder()->paginate(6)->get();

// get one random record
Model::inRandomOrder()->first()

The helper method can also be used like this:

Model::where('name',$name)->inRandomOrder()->get();

PS: The inRandomOrder() method can also be used alongside other helper methods for fetching records like paginate() and limit().

Thats It!😍

I trust this will be of great assistance🥰. I would also love to learn more about this so please feel free to drop your comments or send a direct message on twitter.
Questions are welcomed. Don't forget to connect with me on socials.😎

Thank you😎

Form Requests Validation In Laravel 8

Funke Olasupo — Mon, 05 Jul 2021 16:18:10 +0000

As a back-end engineer, dealing with forms is almost inevitable. I'll be doing a short guide on how to use Form Requests to validate data requests in Laravel
8.

The prominent way of validating data requests in Laravel is by using the validate method or validator facade in our controller like this:

Validate method

Validator Facade

Now there is absolutely nothing wrong with this method but think about scenarios where you need to perform a validation logic more than once, this is one advantage of Form Requests.

Form Requests

So, what are Form Requests?
Form requests are custom request classes that encapsulate their own validation and authorization logic.
Due to this, you really don't need to clutter your controller with any validation logic. They allow you abstract validation logic from the controller to a single class. They also aid the reusability of any validation logic in the controller.

One more benefit😍 is that you can also customize your validation error messages. Amazing right?😉
I consider Form Requests an awesome Laravel feature and it will be great if many engineers can adopt it.

I'll be creating a basic User Registration API with Form Requests Validation, so follow through carefully.👌

Step 1: Set up Controller

To create a controller class, you may use the make:request Artisan CLI command:

php artisan make:controller UserController

This controller class will be created at app\Http\Controllers\UserController.php. Then we define a method register() in that controller that will perform all the instructions for registering a new user.

   public function register(){
      //code...  
    }

All the necessary actions to be carried out on the incoming data when a user registers will be in this register method but before that, we will need to validate the incoming data.

Step 2: Setting up our Model and Database Migrations simultaneously.

PS: If you use PhpMyAdmin, create the database only with the database name, then in your .env file assign the name of the database DB_DATABASE before running migrations. If it is the same as the project name, then you don't need to change it, it will be set to default already.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=qouteapp
DB_USERNAME=root
DB_PASSWORD=

To create a model and migration, you may use this make:request Artisan CLI command:

php artisan make:model User -m

A User model and migration come default with a laravel project so the above won't work for me, but have that in mind for creating your model and migration.

Now, I need the users' email, username, and password to register. Go to the migration file and set up the schema/structure of your table, which will be in create_users_table.php in the migrations folder.

 Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('email')->unique();
            $table->string('username');
            $table->string('password');
            $table->timestamps();
        });

To run your migration, you may use the migrate Artisan CLI command:

php artisan migrate

Now your database is completely set.🎉

Step 3: Setting up our endpoints in api.php in the routes folder.

We need to define our endpoints through which a user can make a request to register.

First, we import the UserController.

use App\Http\Controllers\UserController;

Then,

Route::post('/user/register', [
    UserController::class, 'register'
]);

Step 4: Setting up Form Request.

We need to validate incoming data requests before executing controller instructions to that data.

To create a form request class, you may use the make:request Artisan CLI command:

php artisan make:request UserRegisterRequest

The form request class created will be in the app/Http/Requests/UserRegisterRequest.php but if this directory doesn't exist this command creates one for you.

The form request class comes with 2 methods; authorize() and rules() by default.

authorize()

This method determines if an authenticated user has the authority to make a request to a given resource. It returns a boolean. If it returns true then all authenticated users can make such a request but if it returns false it means no user either authenticated or not can make such a request. It returns false by default.

Asides from this, you can also give or restrict access rights to specific users regarding a resource.
(PS: Further detailed explanation about this will be the advanced course of this guide).

public function authorize()
    {
        return true;
    }

rules()

This method returns an array of validation rules for the incoming data request. It is the same rules and syntax as if you were validating in your controller based on what you're validating for.

public function rules()
    {

            return [
                'email'=>'required|email|bail|unique:users',
                'username' => 'required|bail',
                'password'=>'required|bail'
            ];

    }

Now that we have set our authorize() and rules() methods, we can do one more thing to make this customized.😍 Remember I said earlier that we can customize our error messages if any of our validation fails.

You can customize the error messages used by the form request by overriding the default Laravel messages() method. This method should return an array of attribute/rule pairs and their corresponding error messages:

public function messages()
    {
        return [
            'email.required'=>'Email Is Required',
            'email.email'=>'Enter a valid Email',
            'email.bail'=>'Email Is Required',
            'email.unique'=>'Email has been Taken',
            'username.required'=>'Username Is Required',
            'username.bail'=>'Username Is Required',
            'password.required'=>'Password Is Required',
            'password.bail'=>'Password Is Required'

        ];
    }

Now we can move back to the controller to give instructions to be carried out on the validated data.

Step 5: Finish Setting up the Controller

Now back to the UserController, we want to save the validated data into our database.

First, we import the User model and the UserRegisterRequest outside the class in the UserController.php.
The UserRegisterRequest and a variable $request are passed as a parameter in the register method.
A new user is created and the validated data for that user is passed into that user instance and then saved.

namespace App\Http\Controllers;
use App\Models\User;
use App\Http\Requests\UserRegisterRequest;

use Illuminate\Http\Request;

class UserController extends Controller
{
    public function register(UserRegisterRequest $request){

        $user = new User();
        $user->email=$request->input('email');
        $user->username=$request->input('username');
        $user->password= bcrypt($request->input('password'));

        $user->save();
        return response()->json([
            'message'=>'Registration Successful'
        ]);
    }
}

In summary, if a user registers successfully and all his input information is stored then a JSON response is returned.

Finally, let's test to see if this really works.😏

Step 6: Testing API with Postman.

PS: We will have to set our header to accept JSON and if you'll be cloning my Github repository, I already created a middleware for that.

So I accurately filled in the required fields in their valid format respectively and it returned the output of a JSON response saying 'Registration Successful'. Amazing right?🤗😍

To verify if our Form Request Validation works I didn't fill in anything for email and it returned the output of my error message where email is required saying ''Email is required".

Congratulations on your new knowledge acquisition!🎆🥰

Woah🤩🤗! This has been a thrilling and exciting journey for me, I hope it was for you too.😘

Guess what?😋The entire code for this is open source here on my Github.

To make this article very comprehensive and forward, I didn't give a detailed explanation to anything asides Form Requests. Other articles will be published to properly explain other concepts like models, routes, migrations, controllers, etc.

🎉Teaser!!😛
There will be an advanced series of this guide coming soon and it's going to contain:

Adding After Hooks To Form Requests
Authorizing Form Requests(Restricting and authorizing certain users access rights)
Customizing The Validation Attributes

Stay tuned😘

If you have a buttressing or conflicting view of anything here, please reach out to me on Twitter.

Thanks for reading.🤝

Laravel 8 API Authentication using Laravel Sanctum

Funke Olasupo — Mon, 05 Jul 2021 15:02:31 +0000

Introduction

Why go through the long haul😪 of Laravel Passport to build an authentication system for Single Page Applications when you have Laravel Sanctum 😎?
In this guide, you'll learn how to build a basic authentication where users can register, log in and also log out with Sanctum as well as few other important details about Sanctum.

What is Laravel Sanctum?

Laravel Sanctum gives a lightweight authentication framework for Single Page Applications(SPAs) and token-based APIs. Sanctum permits each client/users of your application to create numerous API tokens for their account. These tokens may be allowed abilities/scopes which indicate the activities that tokens are permitted to perform.

Why Laravel Sanctum?

Here are some advantages of Sanctum😎:

It is lightweight because it uses Laravel's built-in cookie-based session authentication service.
It supports mobile application authentication.
It solves two basic problems:
- It provides a simple way to authenticate Single Page Applications (SPAs) like Angular, Vue or React.
- It issues API tokens to users without the complication of OAuth.

Now🥰, Let's start coding!🎉🎊✨

Step 1: Create a Laravel application.

You can use the laravel command or via the Composer package manager as follows:

laravel new project_name

or

composer create-project laravel/laravel project_name

P:S: A laravel project comes default with a User model and migrations, you can create other models and migrations depending on your application. Here is a snippet of how they look like by default:

Model

Migration

P:S: I have decided to continue with the default fields so I won't be making any modifications to the default User model and migrations. However, you can modify yours depending on your application.

Step 2: Establish a database connection.

Here is a guide I wrote in connecting your Laravel app to MySQL database . If your database is different, do well to connect it appropriately.

Step 3: Set up Laravel Sanctum

Install Laravel Sanctum via the Composer package manager:

    composer require laravel/sanctum

Publish the configuration and migration files using the vendor:publish Artisan command:

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

Lastly, run your migrations with the migrate Artisan command:

php artisan:migrate

Note: If you plan to use Sanctum to authenticate SPAs then you should add Sanctum middleware to your api middleware group in app/Http/Kernel.php file:


'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

Step 4: Update User Model

Sanctum allows you to issue Personal Access Tokens/ API Tokens to authenticate API request to your application.
To issue tokens for users, the User model should use the Laravel\Sanctum\HasApiTokens trait:

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;
}

P:S: The above code snippet shouldn't override the entire user model but update it.

Step 5: Set up Authentication Controller

In this controller define the register(), login(), logout() methods.

Create the AuthController with make:controller Artisan command:

php artisan make:controller AuthController

Import the User model outside the AuthController class:

use App\Models\User;

P. S: To issue tokens, a createToken() method is used.

Define the register() method for users to register and get issued a token to make other API requests.

 public function register(Request $request){
        $fields = $request->validate([
         'name'=>'required|string',
         'email'=>'required|string|email|unique:users,email',
         'password'=>'required|string|confirmed'   
        ]);

        $user= User::create([
            'name'=>$fields['name'],
            'email'=>$fields['email'],
            'password'=> bcrypt($fields['password'])
        ]);

        $token = $user->createToken('myapptoken')->plainTextToken;

        $response= [
            'user' => $user,
            'token'=> $token
        ];

        return response($response, 201);
    }

Define the login() method for users to get logged in and issued a token to make other API requests.

public function login(Request $request){
        $fields = $request->validate([

         'email'=>'required|string|email',
         'password'=>'required|string'   
        ]);

        //Check email

        $user= User::where('email', $fields['email'])->first();

        //Check Password
        if(!$user || !Hash::check($fields['password'], $user->password) ){
            return response([
                'message'=>'Invalid Credentials'
            ], 401);
        }

        $token = $user->createToken('myapptoken')->plainTextToken;

        $response= [
            'user' => $user,
            'token'=> $token
        ];

        return response($response, 201);
    }

Define the logout() for users to log out by revoking their tokens thereby they no longer have access to the protected routes until they log in again and are issued another token.

 public function logout(Request $request){
        auth()->user()->tokens()->delete();

        return [
            'message'=> 'Logged out'
        ];
    }

Step 6: Set up the Routes

All Laravel routes are defined in your route files, which are located in the routes directory.
Since we are building an API, our routes will be in the routes\api file. Now let's update our routes for register, login and log out.

use App\Http\Controllers\AuthController;

//Public routes
Route::post('/register', [AuthController::class, 'register']);
Route::post('/login', [AuthController::class, 'login']);
//Protected routes
Route::middleware('auth:sanctum')->post('/logout', [AuthController::class, 'logout']);

P. S: Note that the log out route is protected because only an authorized user who has logged in can log out.

We are all done coding! 🎉, Lets go to testing the API now.

Step 7: Test with Postman

Before making any of these API requests, we need to set a header for the application to accept JSON data:

Firstly, the registration function.

You're wondering why I get to use password_confirmation when it's not in my database? It's a validation rule I set to aids users to be certain of their password before submission.

Next is the Login function.

It returns a token for that user and now that token can be used to make any authorized request.

The above are public endpoints which mean anybody can access them. Let's try testing a protected endpoint that needs an authorized(logged in) user to make such a request.

For example, the log out function of the application can only be possible if the user has logged in, therefore it's a protected endpoint. You can also have some resources that you want only authorized users to see, it will definitely be a protectedendpoint.

Lastly, log out function.

The token that was given to the user at login will be set as Bearer Token in the Authorization for Postman to make a Log out Request:

This particular users token is deleted and can't access any protected endpoint again until he logs in again and is assigned a new token.

Let's try to use that same token to log out again, it will tell us we are unauthenticated for this request:

For further proof that the endpoint is protected , when we don't pass any token, it returns an unauthenticated message:

Conclusion

Wow! 😎You're great to go with Sanctum👍

I know somewhere along the article must've been overwhelming for some of us, so guess what🤩?
I made the entire code for this article open-source on Github here . Do well to check it out for further clarifications(P . S: I have some extra resources and endpoints there too🤫).

I am open to contributions, comments, questions and further discussions. Thanks for reading🤝

How To Add Google's Two Factor Authentication To A Laravel 8 Application.

Funke Olasupo — Tue, 29 Jun 2021 17:36:46 +0000

Introduction

Laravel provides an amazing authentication scaffold that handles registration, login, and all other authentication parts for users that are easy to use.

However, the traditional email and password are becoming less secure due to many cyber attacks like SQL injections, phishing scams and data breaches.

The concept of two-factor authentication(2FA) was created to overcome this shortcoming.

What is Two Factor Authentication (2FA)?

Two-factor authentication (2FA) strengthens access security by requiring two methods to verify users identities.

The traditional password is already one factor of authentication which is something only the user should have. Some extra form of security that a user should also have includes biometrics(fingerprint), voice pattern recognition, or iris scan which are quite expensive but awesome.

The second factor should be something that users don't readily have or aren't constant. One form of the second factor is One-Time Passwords(OTPs) which will be our focus here.

What is a One-Time Password(OTP)?

A one-time password (OTP) is an automatically generated set of characters used to authorize a user for a specific action. As the name implies, it can only be used once. It can either be counter-based or time-based.

After the correct password is provided in the login form, the user is prompted for an OTP depending on your application or preference. This can be implemented in so many ways such as:

Hardware Tokens
One Time Password (OTP) sent via SMS
Google Authenticator

In this guide, you will learn how to use Google Authenticator to implement Time based One-Time Password (TOTP) specified in RFC 6238. which uses HMAC-Based One-Time Password Algorithm (HOTP) specified in RFC 4226 in building an authentication system.

We will be using this package to implement the Google Two-Factor Authentication on our Laravel Application.

Through this guide, I highlighted some issues, their solutions and modifications to help have a better experience with this packages.

Google Authentication Apps

To use the two-factor authentication, the user will have to install a Google Authenticator compatible app. Here are a few:

An advantage of using Google Authenticator is that after downloading the app to your smartphone, you can use it offline unlike other 2FA options which need to be connected to the internet to work which may be a disadvantage to users in a cut off location *for example, the basement of a building.

How Time based One-time Password works?

After the user logs in successfully, a prompt showing a QR code and alternatively a code(set of characters to manually input if the user may not be able to scan QR code).
Upon scanning or submitting the code, the server generates a secret key which is passed to the user.
The secret key is combined with the current Unix timestamp to generate a six-digit code using a message authentication code (HMAC) based algorithm.
The six-digit code is the OTP and it changes every 30 seconds.

Now let's get to coding!😎

Building the Authentication System

Create the Authentication Scaffold.

Step 1: Create a Laravel application.

You can use the laravel command or via the Composer package manager as follows:



laravel new project_name

or

composer create-project laravel/laravel project_name

Step 2: Establish a database connection.

Here is a guide I wrote in connecting your Laravel app to MySQL database. If your database is different, do well to connect it appropriately.

Step 3: Install Laravel/UI.



composer require laravel/ui

Step 4: Install Bootstrap Auth Scaffolding.

The bootstrap authentication scaffold gives a UI and basic authentication for registration and login. You can install it with this Artisan command:



php artisan ui bootstrap --auth

Step 5: Install NPM Packages.



npm install

Step 6: Run NPM environment.



npm run dev

Step 7: Run the application.

You can serve the laravel application with the following Artisan Command:



php artisan serve

Step 8: Now hit this URL on your browser.



http://localhost:8000/register

You should be able to view the register and login page like this:

P.S: We haven't run the migrations yet so submitting the forms will return an error message.

Adding the Two-Factor Authentication to Registration.

AIM:

Let's pause and identify what we want to achieve:

A user's secret for authenticator will be generated when a user tries to register
That secret will be used to show a QR Code for the user to set up their Google Authenticator upon the next request.
The user is registered with their Google Authentication secret after submitting the correct OTP.

P.S: The QR code is accessible ONLY once for maximum security and if the user needs to set up 2FA again, they will have to repeat the process and invalidate the old one.

Section 1: Generating QR Code and Displaying secret

Step 1: Install two packages.
The first is Google Authenticator package for PHP and the second package is a QR code generator which is BaconQrCode.



composer require pragmarx/google2fa-laravel
composer require bacon/bacon-qr-code

Step 2: Publish the config file.



php artisan vendor:publish --provider="PragmaRX\Google2FALaravel\ServiceProvider"

Step 3: Update RegisterController with register() method.

P.S: Include the Request class outside the controller class.



use Illuminate\Http\Request;



    public function register(Request $request)
      {
          //Validate the incoming request using the already included validator method
          $this->validator($request->all())->validate();

          // Initialise the 2FA class
          $google2fa = app('pragmarx.google2fa');

          // Save the registration data in an array
          $registration_data = $request->all();

          // Add the secret key to the registration data
          $registration_data["google2fa_secret"] = $google2fa->generateSecretKey();

          // Save the registration data to the user session for just the next request
          $request->session()->flash('registration_data', $registration_data);

          // Generate the QR image. This is the image the user will scan with their app
       // to set up two factor authentication
          $QR_Image = $google2fa->getQRCodeInline(
              config('app.name'),
              $registration_data['email'],
              $registration_data['google2fa_secret']
          );

          // Pass the QR barcode image to our view
          return view('google2fa.register', ['QR_Image' => $QR_Image, 'secret' => $registration_data['google2fa_secret']]);
      }

Step 4: Override the default register() trait.

Since we defined our own register() method, we need to update the trait to avoid a clash with the default register() method from the authentication scaffold.

Instead of



use RegistersUsers;

use this:



  use RegistersUsers {
         // We are doing this so the predefined register method does not clash with the one we just defined.
           register as registration;
       }

Step 5: Create the view to display the QR code.

Our register() method already redirects to view(google2fa.register.blade.php). This means we will create agoogle2fa folder and a register.blade.php file in it. The full path will be resources/views/google2fa/register.blade.php.

This will be the content of the file to display the QR code:



@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Set up Google Authenticator</div>

                <div class="panel-body" style="text-align: center;">
                    <p>Set up your two factor authentication by scanning the barcode below. Alternatively, you can use the code {{ $secret }}</p>
                    <div>
                        <img src="{{ $QR_Image }}">
                    </div>
                    <p>You must set up your Google Authenticator app before continuing. You will be unable to login otherwise</p>
                    <div>
                        <a href="/complete-registration"><button class="btn-primary">Complete Registration</button></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

P.S: Now after submitting valid credentials at registration, the user is redirected to a page with a valid QR code and also the secret(if they cant scan the code). However, users can't complete registration yet because we are yet to set up the controllers and route to handle that.

Section 2: Registering the user.

Step 1 : Update User Migration.
Since we haven't run our migrations yet, we can add a column for Google two factor authentication secret. We will update the up() method in database/migrations/2014_10_12_000000_create_users_table.php like this:



  public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->text('google2fa_secret');
            $table->timestamps();
        });
    }

Step 2: Run the migrations.

We can now run our migrations to the database with this Artisan command:



php artisan run migrate

P.S: If you have run your migrations before now, Here is a guide I wrote about Adding and Removing columns from existing tables in database . (Fear not! I got you covered😎)

Step 3 : Update the RegisterController with completeRegistration() method.



 public function completeRegistration(Request $request)
      {        
          // add the session data back to the request input
          $request->merge(session('registration_data'));

          // Call the default laravel authentication
          return $this->registration($request);
      }

Step 4: Update User model and create() method in RegisterController with google2fa_secret field.

First, we need to set the User model as hidden and fillable property so that it can be included and also hidden if we cast it to an array or JSON.



protected $fillable = [
        'name',
        'email',
        'password',
        'google2fa_secret'
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
        'google2fa_secret'
    ];

Then we also need to update the create() method to accept the field like this: ```php

protected function create(array $data)
{
return User::create([
'name' => $data['name'],
'email' => $data['email'],
'password' => Hash::make($data['password']),
'google2fa_secret' => $data['google2fa_secret'],
]);
}


**Step 5: Set up routes for `complete-registeration`.**

This will be in our `routes/web.php` file like this:

```php


Route::get('/complete-registration', [App\Http\Controllers\Auth\RegisterController::class, 'completeRegistration'])->name('complete-registration');

Step 6 : Encrypt the google2fa_secret.

We are all set😍, however, let's take an extra step for security and encrypt the google2fa_secret in the User model like this:



 public function setGoogle2faSecretAttribute($value)
    {
         $this->attributes['google2fa_secret'] = encrypt($value);
    }

    public function getGoogle2faSecretAttribute($value)
    {
        return decrypt($value);
    }

Now a user that successfully registers with the correct OTP should see this:

HIGHLIGHT 1

Here is an issue you're likely to face at this point depending on your Laravel version and its compatibility with these packages.

Here is one solution I figured out🤗:

The Bacon-Qr-code package seems to be most stable on version 1.0.3 so you can downgrade it with the following composer command:



composer require bacon/bacon-qr-code:~1.0.3

Now try to submit the form again, the registration should be successful!🎉👍

Adding the Two-Factor Authentication to Log in.

Now we can generate the QR code as well as the secret, thereafter successfully register a user.

But we want to prompt users for their OTP before granting them access to any part of the app.🤔

Step 1: Set up Route Middleware

The pragmarx/google2fa-laravel package provides a middleware to prevent users from accessing the app unless OTP has been provided.

First, we need to add this to the routeMiddleware array in app/Http/Kernel.php before we can use it.



 protected $routeMiddleware = [
        '2fa' => \PragmaRX\Google2FALaravel\Middleware::class,
    ];

This will restrict any user that hasn't submitted a valid OTP from access to the home page. It will keep redirecting back to resources/views/google2fa/index.blade.php prompting for the OTP until a valid OTP is sent.

USAGE

After scanning the QR code or inputting Secret on the Google Authenticator app, it automatically generates an OTP on the Authenticator App.
Click on Complete Registration then the user is prompted for the OTP and if OTP submitted is valid(being careful that the OTP on the app refreshes every 30 seconds, so the user must input the current OTP) then, the user is redirected to home page else user will keep being prompted for the OTP until the submission is valid.

The OTP page which is resources/views/google2fa/index.blade.php looks like this:

A user that has successfully logged in , validating both forms of authentication will see the home page:

HIGHLIGHT 2

I realized that it wasn't user-friendly to keep redirecting users back to OTP page for a valid OTP if the submission was invalid. So I decided to return an error message when redirecting to inform users that the OTP entered was wrong.

Update the resources/views/google2fa/index.blade.php like this:



@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center align-items-center " style="height: 70vh;S">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading font-weight-bold">Register</div>
                <hr>
                @if($errors->any())
                    <b style="color: red">{{$errors->first()}}</b>

                @endif

                <div class="panel-body">
                    <form class="form-horizontal" method="POST" action="{{ route('2fa') }}">
                        {{ csrf_field() }}

                        <div class="form-group">
                            <p>Please enter the  <strong>OTP</strong> generated on your Authenticator App. <br> Ensure you submit the current one because it refreshes every 30 seconds.</p>
                            <label for="one_time_password" class="col-md-4 control-label">One Time Password</label>


                            <div class="col-md-6">
                                <input id="one_time_password" type="number" class="form-control" name="one_time_password" required autofocus>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-md-6 col-md-offset-4">
                                <button type="submit" class="btn btn-primary">
                                    Login
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Here is what the result will be if the submitted OTP is wrong:

Conclusion

Wow!🎉🤗 You have built an authentication system with Google's Two Factor Authentication💪💪.

Guess what😎? I made the entire code open-source here on Github 🤗. I am open to conversations, questions or contributions, especially concerning the highlights. I would love to know better ways to achieve these things.
You can drop your comments or reach out to me on Twitter.

Thanks for reading.🤝

How To connect Laravel Application to MySQL Database.

Funke Olasupo — Sun, 06 Jun 2021 23:34:21 +0000

Introduction

Here is a simple guide on establishing a connection between your database(MySQL) and Laravel application.

Step 1 : Creating the database

This can be done either by a database manager eg phpMyAdmin or the Command Line Interface (CLI).

Database Manager(phpMyAdmin)
Command Line Interface(CLI)
A database can be created with the following command:

CREATE DATABASE db_name;

P.S: You have to log in to MySQL before you can create a database via any of these methods.

Step 2: Update .env configurations

Laravel default environment file .env contain some common configuration values that differ based on if your application runs locally or on a production server.

P.S: This configuration values are based on my local machine ,
yours may differ, do well to confirm.

Update the .env with the database name you want to connect to,as well as the other environment variables if they differ from the default.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=test
DB_USERNAME=root
DB_PASSWORD=

Hurray! 🎉The laravel application is now properly connected to the database.

Step 3: Migrations(optional)

Laravel migrations simply allows you to easily perform certain actions to the database without going to the database manager (eg. phpMyAdmin). They can also serve as a version control for your database. They create tables, columns as well as modify them etc.

Migrations are found in database/migrations directory.
Laravel application comes default with user migration and it looks like this:

It can be executed to the database with the following command:

php artisan migrate

P.S : Refresh your database , it has been updated with users' table and its properties.

I wrote an article to explain more on migrations here. You can also visit the laravel documentation here.

You're all set to continue building!😎
Thank you for reading🤝

Adding and Removing columns from existing tables using Laravel migrations.

Funke Olasupo — Sun, 06 Jun 2021 22:35:54 +0000

Teaser😎

Have you been at that point where you finished setting up your database and realized you forgot to add a column 😨 or you put in a wrong column and you have to remove it 😣? Are you like me that usually refreshes the entire database for minor changes ? That's poor programming practice and what would you do if it was a company's database?
Nevertheless, I discovered an easy way out so please, enjoy the read!😎

Introduction

A default laravel migration file comes with a class definition containing both an up() and a down() method. The up() method is run when migration executes to apply changes to the database while the down() method is run to revert those changes.

P.S: Ensure that you have connected your laravel application to database before proceeding. If you're not sure how to do that, here is a simple guide.

Generating Migrations

A migration can be simply generated with the following command:

P.S: Migration files are in the database/migrations directory. The name of the table to be created is tests, you can change it to any preferred name.



php artisan make:migration create_tests_table

Laravel will use the name of the migration to attempt to guess the name of the table and whether or not the migration will be creating a new table. If Laravel is able to determine the table name from the migration name, Laravel will pre-fill the generated migration file with the specified table.

The migration file should look like this by default:



use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTestsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tests', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('tests');
    }
}

P.S : Schema::create is only used when a table is to be created initially. A common error is trying to use it to add a column to an existing table.

The tests table that should have two columns, name(string) and age(integer) will be written in the up() method as follows:



public function up()
    {
        Schema::create('tests', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->integer('age');
            $table->timestamps();
        });
    }

Running Migrations

To execute migrations to the database, run this Artisan command:



php artisan migrate

This command runs all outstanding migrations.

P.S: Confirm the database that it's been updated with the columns and their respective types.

Other Migration Commands

php artisan migrate:rollback : This rolls back the last batch of migrations.
php artisan migrate:reset : This rolls back all your applications migrations.
php artisan migrate:refresh : This rolls back all your migrations and execute the migrate command. Its like recreating your entire database.
php artisan migrate:fresh : This drops all the tables and executes the migrate command again.

P.S: The rollback always executes the corresponding down() method.

Updating Tables : Adding columns to an existing table.

A gender(string) column is added to the tests table by the following steps:

Create a migration file


 artisan make:migration add_gender_to_tests_table --table=tests

Using Schema::table in the up() method which will be provided by default, columns can be added as follows:



 public function up()
    {
        Schema::table('tests', function (Blueprint $table) {
            $table->string('gender');
        });
    }

Setting up the rollback option

The down() method should also be updated because of rollbacks.



public function down()
    {
        Schema::table('tests', function (Blueprint $table) {
            $table->dropColumn('gender');
        });
    }

Now execute the migrations.

To run the migrations, use this Artisan command :
php artisan migrate.

P.S : Confirm that the gender column has been added to the tests table on your database.

Note: Laravel places the added column last on the table, however it can be placed at any desired position on the table.

For the gender to be placed after the name, the up() method would rather be like this:



 public function up()
    {
        Schema::table('tests', function (Blueprint $table) {
            $table->string('gender')->after('name');
        });
    }

This looks more organized and better.

The gender column is successfully added to the tests table.

Updating Tables: Removing columns from an existing table.

There are several ways to remove a column from a table.

1.Remove a column

To remove the name column from tests table:

Create the migration file with this Artisan command:



php artisan make:migration drop_gender_from_tests_table --table=tests

Update the up() method with column you want to drop. ```php

public function up()
{
Schema::table('tests', function (Blueprint $table) {
$table->dropColumn('name');
});
}

* Run migrations
Execute the migrations with this `Artisan` command.
`php artisan migrate`

> __P.S : Confirm that the name column has been dropped on the tests table.__

![The tests table has dropped name column](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nwkcslpco07mjwospjw.png)

> __P.S : A migrations file name is unique so every migration file should have different names when creating them.__

2.__Remove multiple columns__

In order to remove more than one column from your table , the same steps are followed as above but the `up()` method is slightly different. The column names are passed into an array as a single argument to `dropColumn()` like this:

```php


  public function up()
    {
        Schema::table('tests', function (Blueprint $table) {
            $table->dropColumn(['age', 'gender']);
        });
    }

Here are the results on the database:

3.Remove a column if it exists.

As usual, follow the same guides as outlined in the first method of removing column with the only slight difference in the up() method. However, the column will be checked if its existing before its dropped.
The up() method will be as follows:



 public function up()
    {
        Schema::table('tests', function (Blueprint $table) {
             //If the id column exists on tests table
            if (Schema::hasColumn('tests', 'id')){

                //drop the id column
                Schema::table('tests', function (Blueprint $table) 
    {
                    $table->dropColumn('id');
                });
            }

After running the migrations, here is the final output of our database:

The id, name, age and gender column is successfully removed from the table.

Conclusion

Now, you don't need to refresh your database always for these minor changes😎
This entire code is open source on Github😍.
Thank you for reading🤝.

HackerRank Series #1: Simple Array Sum

Funke Olasupo — Mon, 03 May 2021 02:00:54 +0000

Problem Statement

Given an array of integers, find the sum of its elements.

For example, if the array $ar = [1,2,3], 1+2+3 =6, so return 6.

Function Description

Complete the simpleArraySum function in the editor below. It must return the sum of the array elements as an integer.

simpleArraySum has the following parameter(s):

ar: an array of integers

Sample Input : 1 2 3 4 10 11
Sample Output : 31

Explanation

In our text editor on HackerRank, we already have the simpleArraySum() function declared with the parameter $ar which can be any given array. All you need to do is write a set of instructions in the function that will calculate the sum of all array elements so whenever the function is called, it can calculate the sum of the array elements of any simple array.
For example in our Sample Input [1, 2, 3, 4, 10, 11], we expect an output of 31 seeing 1 +2+ 3+ 4 +10 +11 = 31.

Solution

Ponder: How do we get all the elements of an array🤔? A loop should work fine!😎

Psuedocodes

Let's try to solve this problem without using codes.

Initialize sum to 0.
Loop through the array and get the array elements and add the value to sum.
At each loop sum is updated with the latest sum value after the previous array element has been added.
After the loop, return sum.

Now, let's go coding!

I will be using the for method in Javascript and foreach method in PHP to loop through the array and solve this problem. This isn't static so you can use any valid method to loop through the array in your preferred language.

Now, we can write the Javascript code as follows:

function simpleArraySum(ar) {

   let sum=0;
   for( let i=0;  i<ar.length;  i++ ){
       sum+=ar[i];
   }
    return sum;
}

Now, we can write the PHP code as follows:

function simpleArraySum($ar) {

   $sum=0;
   foreach($ar as $value){
       $sum+=$value;
   }
    return $sum;
}

Conclusion

This would return an output of the sum of the array as a single integer. When using the for method, we are fetching the array elements based on their index so be careful not to do i<=ar.length; in your condition statement. Avoid this common error because an array starts at index [0].

Congratulations!🎉🎈 You completed your first warmup challenge on HackerRank.

P.S: This is the beginning of a series on the warmup algorithm challenges from HackerRank so stay tuned for more amazing challenges.

HackerRank Series #2: Compare the Triplets

Funke Olasupo — Mon, 03 May 2021 01:54:42 +0000

Problem Statement

Alice and Bob each created one problem for HackerRank. A reviewer rates the two challenges, awarding points on a scale from 1 to 100 for three categories: problem clarity, originality, and difficulty.

The rating for Alice's challenge is the triplet a = (a[0], a[1], a[2]), and the rating for Bob's challenge is the triplet b = (b[0], b[1], b[2]).

The task is to find their comparison points by comparing a[0] with b[0], a[1] with b[1], and a[2] with b[2].

If a[i] > b[i], then Alice is awarded 1 point.
If a[i] < b[i], then Bob is awarded 1 point.
If a[i] = b[i], then neither person receives a point. Comparison points are the total points a person earned.

Given a and b, determine their respective comparison points.

Example

a = [1, 2, 3]

b = [3, 2, 1]

For elements [0], Bob is awarded a point because a[0]>b[0].
For the element [1] ,a[1] and b[1] are equal ,so no points are earned .
Finally, for elements [2], a[2] > b[2] so Alice receives a point.
The return array is [1, 1] with Alice's score first and Bob's second.

Function Description

Complete the function compareTriplets in the editor below.

compareTriplets has the following parameter(s):

int a[3]: Alice's challenge rating
int b[3]: Bob's challenge rating

Sample Input: 
17 28 30
99 16 8

Sample Output
2 1

Explanation

The function compareTriplets() has already declared alongside its parameters $a and $b which are the challenge ratings for Alice and Bob respectively. All you need to do now is to write instructions in that function to award them points when their ratings are compared with the conditions above and return the comparison array with Alice score coming first.

Let's use our sample input as an example,

b[0] > a[0] so Bob is awarded one point.
a[0] > b[0] so Alice is awarded one point.
a[0] > b[0] so Alice is awarded one point.

This gives Alice a total of 2 points and Bob, 1 point. Now we return an array with the comparison results.

The comparison array is [2,1].

Solution

After reading the problem, we can observe 2 things:

The comparison array must come with Alice score first.
If both ratings are equal, nobody receives a point.

Psuedocodes

Pseudocode is a plain language description of the steps in an algorithm.

With the above observations, our pseudocode can be executed as follows:

Initialize the score for Alice and Bob to 0, respectively.
Loop through both arrays for their ratings.
For every loop, compare both ratings based on the array index and assign one point to the score of the person with the greater rating.
After the loop, return the comparison array with the cumulative points of Alice and Bob.

Now let's get coding!

Here is a solution to this problem in Javascript and PHP. I hope it gives you an idea to solve it in any preferred language.

Now, we can write the Javascript code as follows:

function compareTriplets(a, b) {

let aScore=0;
let bScore=0;
for(let i=0;  i<3; i++){

    if( a[ i]> b[ i])
    {
         aScore+=1;
    }
    else{
    if( a[ i]< b[ i])
    {
         bScore+=1;    
    }  
    } 
}

let comparison_array = [ aScore,  bScore];
return comparison_array;
}

Now, we can write the PHP code as follows:

function compareTriplets($a, $b) {
    $aScore=0;
    $bScore=0;
for($i=0; $i<3;$i++){

    if($a[$i]>$b[$i])
    {
        $aScore+=1;
    }
    elseif($a[$i]<$b[$i])
    {
        $bScore+=1;    
    }   
}

return array($aScore, $bScore);

}

Quite an easy one right? Well done😎.

Conclusion

This is a very good example of an easy question in HackerRank. Although it's very tricky because it looks very complicated at the first read but the first step in solving it is understanding the problem statement. Then you'll be able to solve it easily. If you have any questions or suggestions, do well to drop them in the comment section. Thank you.

The HackerRank series for Algorithm Warmup Challenges continues, so stay tuned!🥰

JWT-AUTH Exception Handling In Laravel 8

Funke Olasupo — Mon, 26 Apr 2021 14:12:19 +0000

Are you experiencing difficulties with handling JWT-AUTH Exceptions in Laravel 8 or you're curious to know how it works? Throughout this article, I will be guiding you through an easy process of understanding it.

INTRODUCTION

JWT-AUTH -> (JSON Web Token Authentication For Laravel and Lumen).

JWT is mainly used for authentication. After a user logs in to an application, the application will create a JWT and send it back to the user. Subsequent requests by the user will include the JWT. The token tells the server what routes, services, and resources the user is allowed to access

We will be creating a basic Register and Login API where authorized users can fetch their information from the database with JWT implemented and then handle some exceptions. Let's begin🤩, I hope you enjoy this guide.

Step 1: Creating a new laravel project
You can create a new laravel project with the following command:

laravel new jwt_exception_handling

Step 2: Set up Model and Migrations for Users

We can set up models and migrations simultaneously like this:

php artisan make:model User -m

PS: A user model and migration already exists because they come default with laravel in App/Models and database/migrations directory respectively.

Set Up Database Connection

This is done in the .env file based on where you are serving your database like this:

PS: These configurations are for my own local machine, yours may be different.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=jwt_handling
DB_USERNAME=root
DB_PASSWORD=

Next is to set up the schema for our migration but since our create_users_table.php migration file comes default with laravel, we have nothing to do here.

public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

Finally we can run our migrations to our database.

We run migrations to our database with this Artisan CLI command:

php artisan migrate

Step 3: Set up Register method User Controller.

We create controllers with this Artisan CLI command:

php artisan make:controller UserController

Implement the User model in the UserController.

use App\Models\User;

Define the register() method in the UserController class.

The register() method validates a users' input and creates a user if the user credentials are validated.

public function register(Request $request)
    {
        $this->validate($request, [
            'name'=>'required',
            'email'=>'required|email|unique:users',
            'password'=>'required'
        ]);

        $user = new User([
            'name'=> $request->input('name'),
            'email'=> $request->input('email'),
            'password'=> bcrypt($request->input('password'))
        ]);

        $user->save();

        return response()->json([
            'message'=>'Successfully Created user'
        ],201);
    }

Next, we want to define the login() method but before that, we need to import JWT.

Step 4: Import JWT-AUTH.

To pull in the latest version of jwt-auth, run this command:

composer require tymon/jwt-auth

Add the service provider to the providers array and alias to the aliases array in the config/app.php config file like this:

'providers' => [

    ...

    Tymon\JWTAuth\Providers\LaravelServiceProvider::class,
],
 'aliases' => [
        'JWTAuth'=>Tymon\JWTAuth\Facades\JWTAuth::class,
    ],

Run the following command to publish the package config file:

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

You should now have a config/jwt.php file that allows you to configure the basics of this package.

There is a helper command to generate a key that will be used to sign your tokens:

php artisan jwt:secret

This will update your .env file with something like JWT_SECRET = (key generated).

Step 5: Set up JWT-AUTH in our project.

Update your User model

Firstly,we need to implement the Tymon\JWTAuth\Contracts\JWTSubject contract on your User model, which requires you implement 2 methods getJWTIdentifier() and getJWTCustomClaims().
Your User model should be updated like this:

<?php

namespace App\Models;


use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Tymon\JWTAuth\Contracts\JWTSubject;

class User extends Authenticatable implements JWTSubject
{
    use HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for arrays.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast to native types.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    /**
     * Return a key value array, containing any custom claims to be added to the JWT.
     *
     * @return array
     */
    public function getJWTCustomClaims()
    {
        return [];
    }

    /**
     * Get the identifier that will be stored in the subject claim of the JWT.
     *
     * @return mixed
     */
    public function getJWTIdentifier()
    {
        return $this->getKey();
    }
}

Next, we need to configure Auth Gaurd

You'll need to update the config/auth.php file with these changes to configure Laravel to use the jwt guard to power your application authentication.

PS: Update only these arrays and leave the others.

'defaults' => [
    'guard' => 'api',
    'passwords' => 'users',
],

...

'guards' => [
    'api' => [
        'driver' => 'jwt',
        'provider' => 'users',
    ],
],

Step 6: Set Up Login Method in UserController

First we will implement JWT and its exception to our UserController.

use JWTAuth;
use Tymon\JWTAuth\Exceptions\JWTException;

Now back to our UserController class, we define the login() method for users to login.

This will validate users' input. The auth method accepts a request containing an email and password which will be checked against the user database for authentication.
Once you authenticate, the controller returns a JWT that you need to keep.

public function login(Request $request)
    {
        $this->validate($request, [
            'email' => 'required|email',
            'password' => 'required'
        ]);

        $credentials = $request->only('email', 'password');
        try {
            if (!$token = JWTAuth::attempt($credentials)) {
                return response()->json([
                    'error' => 'Invalid Credentials'
                ], 401);
            }
        } catch (JWTException $e) {
            return response()->json([
                'error' => 'Could not create token'
            ], 500);
        }
        return response()->json([
            'token' => $token
        ], 200);
    }

Step 7: Set up getUser Method in the UserController.

Still, in our UserController, we define getUser() method which is responsible for getting users' personal information from the database.

public function getUser(){
        $user = auth('api')->user();
        return response()->json(['user'=>$user], 201);
    }

Step 8: Exception Handling

Firstly, we create a route middleware to parse the token of an authenticated user. We make a middleware with this Artisan CLI command:

php artisan make:middleware JWTMiddleWare

A class of JWTMiddleware atApp/Http/Middleware/JWTMiddleware.php directory will be created.

Next, we implement JWTAuth in the JWTMiddleware.php like this:

use JWTAuth;

The middleware comes with a default method handle and now we parse the generated token of an authenticated user like this:

 public function handle(Request $request, Closure $next)
    {

        $user = JWTAuth::parseToken()->authenticate();
        return $next($request);
    }

Add the middleware to the array of routeMiddleware in the kernel.php like this:

protected $routeMiddleware = [
        .......
        'auth.jwt'=>\App\Http\Middleware\JwtMiddleWare::class,
    ];

Exception Handling in Handlers Class.

We will create the handlers for our exception in Handler.php in app/Exceptions directory.
Our exceptions will be in the register() method that comes default with Handler.php.

We will be handling the following exceptions: Invalid token, Expired Token, JWTException but we need to implement these Exceptions in Handler.php.

use Response;
use Exception;
use Throwable;
use Tymon\JWTAuth\Exceptions\JWTException;
use Tymon\JWTAuth\Exceptions\TokenExpiredException;
use Tymon\JWTAuth\Exceptions\TokenInvalidException;

Now, to the register() method:

public function register()
    {

        $this->renderable(function(TokenInvalidException $e, $request){
                return Response::json(['error'=>'Invalid token'],401);
        });
        $this->renderable(function (TokenExpiredException $e, $request) {
            return Response::json(['error'=>'Token has Expired'],401);
        });

        $this->renderable(function (JWTException $e, $request) {
            return Response::json(['error'=>'Token not parsed'],401);
        });

    }

Step 9: Set Up Routes.

Seeing we're are creating an API, we will set up our routes in routes/api.php.

We need to implement our UserController first.

use  App\Http\Controllers\UserController;

Then we set up our routes.

We will be adding the JWTMiddleware to the routes for getting users' details, this way we can see the work of Exception Handling.

Route::post('/register', [
    UserController::class, 'register'
]);
Route::post('/login', [
    UserController::class, 'login'
]);
Route::get('/user', [
    UserController::class, 'getUser'
])->middleware('auth.jwt');

Congratulations, you have successfully built an API with JWT-AUTH😍, Now let us test it with postman.

Step 10: Test with Postman.

This shows that our registration works with valid input.
This shows that our login works with valid input.
Now to get users' information, we need to pass the token alongside the request and we do this by setting Authorization to Bearer (Token) in our headers like this:

Let's verify if our Exception Handling works.

For JWTException, we do not pass token with the request:

For TokenInvalidException, we put in the wrong token:

For TokenExpiredException, we resend that token after a long period of time depending on the time to live for the token.

Congratulations on building an API and implementing JWT-AUTH and also handling some exceptions😍.

Guess what?😊 The code for this practice is open-source here on my Github.

These are my humble opinions so please, if you have any contradicting or buttressing opinions, do well to reach me on Twitter.

If you need more information on jwt-auth, visit the official documentation.

Thank you for reading till the end🤝🤩😍

DEV Community: Funke Olasupo

How I Learnt To Code & Got A Developer Job

Introduction

The Role of Communities In My Journey

Technical Writing & Open Source: An Instrumental Tool for my Technical Growth

Conclusion

Oauth Authentication In Laravel: Social Login With Laravel Socialite

Introduction

What Is OAuth?

How does OAuth Work?

OAuth 1.0 vs. OAuth 2.0

Cryptography

Clean Separation of Roles

Better Support for Non-Browser-Based Applications

Bearer Token vs Access Token

Which is the best, OAuth1 or OAuth2?

OAuth Server Implementation in Laravel

What Is Social Login?

Social Login in Laravel (Laravel Socialite)

How can Social Login be implemented with Laravel Socialite?

Create an Authentication UI Scaffold

Step 1: Create a new Laravel Project

Step 2: Connect to your database

Step 3: Install Laravel/UI

Step 4 : Create a Bootstrap AUTH Scaffold

Step 5: Install NPM Packages

Step 6: Run NPM environment

Step 7: Update the Login page

Step 8: Run the application

Step 9: Hit this URL on your browser

Create Social Login with Socialite

Step 1: Install the Laravel Socialite package

Step 2: Set up routes

Step 3: Configure service providers

Step 4: Set CLIENT_ID and CLIENT_SECRET in the .env file

Step 5: Set up LoginController

Step 6: Create an App for Google, Facebook, and GitHub

Step 7: Update migrations for the users table

Step 8: Add the users’ avatars beside their name in the navbar

Testing

Conclusion

Send Emails In Laravel 8 Using Gmail's SMTP Server

Overview

How To Fetch Resources Randomly in Laravel with a Single Line Of Code.

Thats It!😍

Form Requests Validation In Laravel 8

Validate method

Validator Facade

Form Requests

Laravel 8 API Authentication using Laravel Sanctum

Introduction

What is Laravel Sanctum?

Why Laravel Sanctum?

Conclusion

How To Add Google's Two Factor Authentication To A Laravel 8 Application.

Introduction

What is Two Factor Authentication (2FA)?

What is a One-Time Password(OTP)?

Google Authentication Apps

How Time based One-time Password works?

Building the Authentication System

Create the Authentication Scaffold.

Adding the Two-Factor Authentication to Registration.

AIM:

Section 1: Generating QR Code and Displaying secret

Section 2: Registering the user.

Adding the Two-Factor Authentication to Log in.

USAGE

Conclusion

How To connect Laravel Application to MySQL Database.

Introduction

Step 1 : Creating the database

Step 2: Update .env configurations

Step 3: Migrations(optional)

Adding and Removing columns from existing tables using Laravel migrations.

Teaser😎

Introduction

Generating Migrations

Running Migrations

Other Migration Commands

Step 4: Set CLIENT_ID and CLIENT_SECRET in the `.env` file

Step 7: Update migrations for the `users` table