DEV Community: Varun Verma

Laravel Rest API Passport Authentication for Ionic App

Varun Verma — Tue, 12 Feb 2019 18:45:46 +0000

Introduction

In this tutorial we will learn to create Authentication System by using Laravel Passport. APIs are great and Laravel already makes it easy to perform Rest API authentication.

APIs typically use tokens to authenticate users and do not maintain session state between requests. Laravel makes API authentication a breeze using Laravel Passport, which provides a full OAuth2 server implementation for your Laravel application in a matter of minutes.

For testing of this project. We will also create a mobile app using Ionic 4. But you can also use Postman to test your APIs. We will be using a mobile app so we test the real world environment.

If you are also interested in creating mobile app of your project, see my other post Setting up Ionic to get started.

This project files are available on GitHub at https://github.com/flicher-net/laravel-auth-passport

Step 1 — Getting Started

Let’s go ahead and create a brand new Laravel Project first of all. Open your Terminal or Command Prompt and go to the directory where you want to create app. You can use following command to change directory.

cd Desktop/

Then run the following command to create a new project.

composer create-project --prefer-dist laravel/laravel auth-app

Next go inside the directory by running this command.

cd auth-app/

Step 2 — Installing Laravel Passport

Now let’s install Laravel Passport as well by running following command.

composer require laravel/passport

Step 3 — Migrate Database

The Passport service provider registers its own database migration directory with the framework, so you should migrate your database after installing the package. The Passport migrations will create the tables your application needs to store clients and access tokens.

As laravel comes with users migrations by default, which is located at database/migrations/create_users_table.php. You can also update it according to your requirement. I will just add two new columns instead of name column.

<?php

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

class CreateUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('first_name');
            $table->string('last_name');
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

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

Now we need to change database variable values in .env file. So update that file with your Database Name, Username, Password etc. So we can run our migrations.

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:OZakMJg2LBGFcM5Da/XtArMHSEzWn7Jda+WUKW+Kwec=
APP_DEBUG=true
APP_URL=http://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=flicher
DB_USERNAME=flicheruser
DB_PASSWORD=super-secret-password

BROADCAST_DRIVER=log
CACHE_DRIVER=file
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=mt1

MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

After updating run the following command to migrate database.

php artisan migrate

Now if you check your database, you will see all these tables.

Perfect!

Step 4 — Generate Keys

Next we have to create the encryption keys needed to generate secure access tokens. In addition, the command will create “personal access” and “password grant” clients which will be used to generate access tokens. Run the following command to do that.

php artisan passport:install

Step 5 — Configure

After running this command we need to do some modification in some files. So let’s do that.

First of all open App/User.php and add Laravel\Passport\HasApiTokens trait.

<?php

namespace App;

use Laravel\Passport\HasApiTokens;
use Illuminate\Notifications\Notifiable;
use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;

class User extends Authenticatable
{
    use HasApiTokens, 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',
    ];
}

Next open app/Providers/AuthServiceProvider.php and call Passport::routes method within the boot method. This method will register the routes necessary to issue access tokens and revoke access tokens, clients, and personal access tokens.

<?php

namespace App\Providers;

use Laravel\Passport\Passport;
use Illuminate\Support\Facades\Gate;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;

class AuthServiceProvider extends ServiceProvider
{
    /**
     * The policy mappings for the application.
     *
     * @var array
     */
    protected $policies = [
        'App\Model' => 'App\Policies\ModelPolicy',
    ];

    /**
     * Register any authentication / authorization services.
     *
     * @return void
     */
    public function boot()
    {
        $this->registerPolicies();

        Passport::routes();
    }
}

Finally, in your config/auth.php configuration file, you should set the driver option of the api authentication guard to passport. This will instruct your application to use Passport’s TokenGuard when authenticating incoming API requests.

<?php

return [

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

    'guards' => [
        'web' => [
            'driver' => 'session',
            'provider' => 'users',
        ],

        'api' => [
            'driver' => 'passport',
            'provider' => 'users',
        ],
    ],


    'providers' => [
        'users' => [
            'driver' => 'eloquent',
            'model' => App\User::class,
        ],

        // 'users' => [
        //     'driver' => 'database',
        //     'table' => 'users',
        // ],
    ],

    'passwords' => [
        'users' => [
            'provider' => 'users',
            'table' => 'password_resets',
            'expire' => 60,
        ],
    ],

];

Step 6 — Set API routes

Now let’s set API routes. Normally we create all our routes in routes/web.php but as we are dealing with API so we will create all our routes in routes/api.php.

Copy the following code in routes/api.php. We will create routes for login, register, logout and user.

<?php

use Illuminate\Http\Request;

Route::group([
    'prefix' => 'auth'
], function () {
    Route::post('login', 'Auth\AuthController@login')->name('login');
    Route::post('register', 'Auth\AuthController@register');
    Route::group([
      'middleware' => 'auth:api'
    ], function() {
        Route::get('logout', 'Auth\AuthController@logout');
        Route::get('user', 'Auth\AuthController@user');
    });
});

Step 7 — Create Controller

As we have already created our API routes. Now we need to create AuthController. To do that run the following command.

php artisan make:controller Auth/AuthController

Then open app/Http/Controllers/Auth/AuthController.php and add following code.

<?php

namespace App\Http\Controllers\Auth;

use App\User;
use Carbon\Carbon;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    public function login(Request $request) {
        $request->validate([
            'email' => 'required|string|email',
            'password' => 'required|string',
            //'remember_me' => 'boolean'
        ]);
        $credentials = request(['email', 'password']);
        if(!Auth::attempt($credentials))
            return response()->json([
                'message' => 'Unauthorized'
            ], 401);
        $user = $request->user();
        $tokenResult = $user->createToken('Personal Access Token');
        $token = $tokenResult->token;
        if ($request->remember_me)
            $token->expires_at = Carbon::now()->addWeeks(1);
        $token->save();
        return response()->json([
            'access_token' => $tokenResult->accessToken,
            'token_type' => 'Bearer',
            'expires_at' => Carbon::parse(
                $tokenResult->token->expires_at
            )->toDateTimeString()
        ]);
    }

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

        $user = new User;
        $user->first_name = $request->fName;
        $user->last_name = $request->lName;
        $user->email = $request->email;
        $user->password = bcrypt($request->password);

        $user->save();

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

    public function logout(Request $request)
    {
        $request->user()->token()->revoke();
        return response()->json([
            'message' => 'Successfully logged out'
        ]);
    }
  
    /**
     * Get the authenticated User
     *
     * @return [json] user object
     */
    public function user(Request $request)
    {
        return response()->json($request->user());
    }
}

Step 8 — Adding CORS Middleware

Imagine that all JavaScript code for domain X running in a browser would be able to make http requests to an domain Y. Malious code on domain X would be able to interact with site Y without you knowing. In most circumstances you don’t want this. Luckily all major browsers only allow sites to make requests against their own domain. They don’t allow JavaScript code to make request against a sites on different domains. This is called the same-origin policy.

But there are some scenarios where you do want to allow that behaviour. As we need it now so let’s add CORS Middleware. Run the following command to create a new Middleware

php artisan make:middleware Cors

A new file will be created, Let’s update app/Http/Middleware/Cors.php

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        return $next($request)
            ->header('Access-Control-Allow-Origin', '*')
            ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Headers', 'Content-Type, Authorization, X-Requested-With, X-XSRF-TOKEN');
    }
}

Last step we need to register our new middleware in app/Http/Kernal.php.

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array
     */
    protected $middleware = [
        \App\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
        \App\Http\Middleware\TrustProxies::class,
        \App\Http\Middleware\Cors::class,
    ];

...

Perfect now we are ready. Run the following command to run.

php artisan serve

Tests

As I said before I will be testing this API with a mobile app which I built using Ionic Framework. Now if you want to see how I built that app visit Ionic 4 User Registration & Login Tutorial for full tutorial.

Register

So I am gonna send POST request to http://localhost:8000/api/auth/register. I will be sending First Name, Last Name, Email and Password in POST request.

Now I when click on register button. I get message which I previously set as response, if user the is created successfully. If I check my database now I should have new user in my database.

Perfect, As user is in database now, let’s try to login.

Login

For login we need to send POST request to http://localhost:8000/api/auth/login and we need to send email and password in request so we can get a Bearer Token as response.

As you can see when I tried to login I did got token. I can store this token in local storage of phone or web browser. We will be using this token to get all user data which is protected by API Auth Middleware.

Now this token is also stored in oauth_access_tokens table.

Perfect! Let’s try to get user details now as we are logged in now and we have token.

User

We will be sending GET request to http://localhost/api/auth/user and we need to send token as Authorization Header.

As you can see when I send GET request to http://localhost/api/auth/user with Authorization Header as token which I got earlier. I am getting user details from database.

As you can see under network, we have included token as header.

Logout

Last thing but not least. Let’s try to test logout as well. So I will click on logout button from menu, which will send GET request to http://localhost/api/auth/logout and I also need to send send token as Authorization Header again.

Perfect! We get response back from back-end.

Conclusion

Congratulation! You have successfully added API Authentication in your Laravel Application. If you have any questions ping me Twitter on leave a comment below.

Resources

Original Article is posted at Flicher Blog

Laravel Framework Passport docs
Ionic Framework docs
Setting up Ionic Tutorial
Ionic 4 User Registration & Login Tutorial

Setting up Ionic 4 on MAC

Varun Verma — Thu, 31 Jan 2019 11:02:43 +0000

Introduction

Ionic 4 is finally here! So in this post we will discuss what is the best way to install, run, and emulate Ionic 4 app. We will also see how to test our app while building. Now this post is for Mac users only.

Prerequisites

Make sure you have an up-to-date version of Node.js installed on your system. If you don’t have Node.js installed, you can install it from here

Also we need Ionic and Cordova, So open a terminal window (Mac) and install Cordova and Ionic:

sudo npm install -g cordova ionic

If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:

sudo npm update -g cordova ionic

We also need an IDE or Text Editor. Personally I use Visual Studio Code. But you can use any.

We also need Xcode to simulate devices.

Example Configuration

For demonstration purposes, we’re going to create a simple app

Step One — Create a new Ionic Application

First of all open Terminal and go to a directory where you want to create app. You can use following command to go to different directory.

cd Desktop/

To create a new Ionic 4 application, paste this command in your terminal. There are 3 basic layouts we can use when we are creating a new Ionic 4 app.

Blank
Sidemenu
Tabs

In this tutorial we will be using Tabs.

ionic start appName tabs --type=angular

After installing `NPM` modules and dependencies, you will see this question, just type `N` because we are not using it yet.

Install the free Ionic Appflow SDK and connect your app? (Y/n) : N

Next, go to the newly created app folder.

cd appName/

Step Two — Running App

Now we can use following command to run the app in browser.

ionic serve -l

You will see this question, just type `Y` and press enter.

Install @ionic/lab? (Y/n) : Y

After that, a new window will open in your default browser, which looks like this

Now we have successfully created an Ionic 4 app and we even tested it by running it on web browser. Perfect!!!

Is that it?

May be there is one more thing we need to do, Now if you open Inspect Element of this page, by right clicking on app, and then click on Inspect

After clicking on Inspect, you will see a new window, Now I want you to click on Console.

You will see something like following image. Now what the Heck are these errors?

So basically StatusBar is a Native Cordova plugin and as we are running our app on web browser, so Native Cordova plugins won’t work like Camera, Push Notifications etc.

Now you can use Ionic DevApp. You can just install it on your iOS or Android device and run app there. The native Cordova plugins will work just fine there.

But while building the app. we will need see console to see all errors. But if we are using Ionic DevApp, we can’t see console.

So what’s the solution?

So we need to run this app in actual iPhone and use Safari Web Inspector to see console. So what if we don’t have physical device? That’s ok as well. We can run a simulator for iPhone, which will work just like as physical device.

Step Three — Enable Cordova

Run following command to get all Cordova files.

ionic integrations enable cordova

This command is going to create some new files. After that we need to change package id in config.xml file. You have to change the id attribute of widget tag to change your app id.

For Example:

So for my project I am going to change io.ionic.starter to net.flicher

<widget id=”io.ionic.starter” version=”0.0.1″ xmlns=”http://www.w3.org/ns/widgets” xmlns:cdv=”http://cordova.apache.org/ns/1.0″>

<widget id=”net.flicher” version=”0.0.1″ xmlns=”http://www.w3.org/ns/widgets” xmlns:cdv=”http://cordova.apache.org/ns/1.0″>

Step Four — Running app on Simulator

To run Simulator run following command, as mentioned in Ionic documentation.

Xcode 10 support in Cordova is still a work-in-progress. So they recommend using XCode 9. So either you can install XCode 9 or use following command to get it working with XCode 10. See this issue for details.

ionic cordova emulate ios -lc -- --buildFlag="-UseModernBuildSystem=0"

Lets understand flags used in this command

-l: Live Reload
-c: Console Errors in terminal
-- --buildFlag=”-UseModernBuildSystem=0″: Use XCode old build system

After running this command, Simulator will open and app will be installed on it. It will look like this.

Step Five — Opening Safari Web Inspector

Safari has Web Inspector support for iOS simulators and devices. Open the Develop menu and select the simulator or device, then select the Ionic App to open Web Inspector.

If the Develop menu is hidden, enable it in Safari » Preferences » Advanced » Show Develop menu in menu bar.

After you click on Simulator, a new windows will open which will look like this.

You can refresh the app once by pressing Command (⌘)-R on Web Inspector to see console logs. As Live reload is enabled, so if you make modification to your project. The Ionic App will reload it self, when you save the file and you will see the change you made in Simulator.

Conclusion

Congratulation, you have successfully created your first Ionic 4 app and ran it on Simulator as well.

What’s next?

Go to Ionic Documentation and add new features to your app.

Have fun!

Follow me on Twitter

Follow me on Instagram

My Blog Flicher