How to Create User Register & Login GraphQL API in Laravel?

Hello Laravel Friends,

In today’s blog, I will explain How to Create User Register and Login GraphQL API in Laravel.

GraphQL is a powerful query language for APIs that provides a flexible and efficient way to retrieve and manipulate data. In this tutorial, we’ll explore how to create a user register and login GraphQL API using the Laravel framework. Before that, learn How to Create GraphQL API in Laravel?

By the end of this tutorial, you’ll have a working GraphQL API that allows users to register and log in to your application.

Steps to Create User Register & Login GraphQL API in Laravel

Create Project and Install GraphQL Package

Step 1: Create a Laravel project using the below command

composer create-project laravel/laravel:^9.0 laravel-blog

Step 2: Install the GraphQL package via composer using the below command 

composer require rebing/graphql-laravel

Step 3: Publish the configuration file using the below command

php artisan vendor:publish –provider="Rebing\GraphQL\GraphQLServiceProvider"

After running this command, the graphql.php file will be created in your config folder

Step 4: After that, run the migration command to add a users table in your database

php artisan migrate

Register User API

Step 5:  Now, we will create a type to use for the GraphQL API. 

php artisan make:graphql:type RegisterUser

You will find this type on this path in your Laravel project – App\GraphQL\Types

Now add the below code in your type file. 

<?php

declare(strict_types=1);

namespace App\GraphQL\Types;

use Rebing\GraphQL\Support\Type as GraphQLType;
use GraphQL\Type\Definition\Type;

class RegisterUser extends GraphQLType
{
    protected $attributes = [
        'name' => 'RegisterUser',
        'description' => 'A type'
    ];

    public function fields(): array
    {
        return [
            "name" => [
                "type" => Type::string(),
                "description" => "Name of user",
            ],
            "email" => [
                "type" => Type::string(),
                "description" => "User email",
            ]
        ];
    }
}

Step 6:  Now, we will create a mutation to use for the GraphQL API. 

php artisan make:graphql:mutation RegisterUser

You will find this type on this path in your Laravel project – App\GraphQL\Mutations

Now add the below code to your mutation file 

<?php

declare(strict_types=1);

namespace App\GraphQL\Mutations;

use App\Models\User;
use Closure;
use GraphQL\Type\Definition\ResolveInfo;
use GraphQL\Type\Definition\Type;
use Rebing\GraphQL\Support\Facades\GraphQL;
use Rebing\GraphQL\Support\Mutation;
use Rebing\GraphQL\Support\SelectFields;

class RegisterUser extends Mutation
{
    protected $attributes = [
        'name' => 'registerUser',
        'description' => 'A mutation'
    ];

    public function type(): Type
    {
        return GraphQL::type("RegisterUser");
    }

    public function args(): array
    {
        return [
            'name' => [
                "name" => "name",
                 "type" => Type::string(),
            ],
            'email' => [
                "name" => "email",
                "type" => Type::string()
            ],
            'password' => [
                "name" => "password",
                 "type" => Type::string()
            ]
        ];
    }
    
    public function rules(array $args = []): array
    {
        return [
            'name' => ['required'],
            'email' => ['required', 'email', 'unique:users'],
            'password' => ['required'],
        ];
    }

    public function resolve($root, array $args, $context, ResolveInfo $resolveInfo, 			Closure $getSelectFields)
    {
        $fields = $getSelectFields();
        $select = $fields->getSelect();
        $with = $fields->getRelations();

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

        return $user;
    }
}

Step 7: Now configure both your types in the graphql.php file like the below code 

'schemas' => [
    'default' => [
        'query' => [
            // ExampleQuery::class,
        ],
        'mutation' => [
            "registerUser" => \App\GraphQL\Mutations\RegisterUser::class,
        ],
        // The types only available in this schema
        'types' => [
            "RegisterUser" => \App\GraphQL\Types\RegisterUser::class,
        ],

        // Laravel HTTP middleware
         'middleware' => null,

        // Which HTTP methods to support; must be given in UPPERCASE!
         method' => ['GET', 'POST'],

        // An array of middlewares, overrides the global ones
        'execution_middleware' => null,
    ],
],

After that, clear the config cache using the below command

php artisan config:cache

Step 8:  Now open Postman

• Add Graphql endpoint – http://127.0.0.1/graphql 
• Select Graphql in the body
• Add the below code to your Postman

mutation {
    registerUser(
        name: "Test User",
        email: "test@gmail.com",
        password: "123456"
    )
    {
        name,
        email,
   }
}

Output –

{
    "data": {
        "registerUser": {
            "name": "Test User",
            "email": "test@gmail.com"
        }
    }
}

Login User API

For Login, we have to use the Laravel Sanctum package.

Intro laravel-sanctum : 

Laravel Sanctum is provided for token-based authorization to SPA(single page application) like mobile apps and React web apps. It provides multiple API tokens to its associative user. The token provides the ability to access restricted APIs/platforms.

On the web, we can use a session to authenticate. But in headless APIs, we need to use token-based authorization.

First, you have to check in your composer.json file whether the laravel-sanctum composer is already installed or not. If not, you have to follow the below steps to configure the sanctum composer

Step 9: Install the sanctum via composer 

composer require laravel/sanctum

Step 10: Publish the configuration file using the below command

You should publish the Sanctum configuration and migration files using the vendor:publish Artisan command. The sanctum configuration file will be placed in your application’s config directory.

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

Sanctum will create one database table to store API tokens, so run the migration command.

php artisan migrate

Step 11: Create login user graphql type 

php artisan make:graphql:type LoginUser
php artisan make:graphql:type User

And add the below code in LoginUser File.

<?php

declare(strict_types=1);

namespace App\GraphQL\Types;

use GraphQL\GraphQL;
use GraphQL\Type\Definition\Type;
use Rebing\GraphQL\Support\Facades\GraphQL as FacadesGraphQL;
use Rebing\GraphQL\Support\Type as GraphQLType;

class LoginUser extends GraphQLType
{
    protected $attributes = [
        'name' => 'LoginUser',
        'description' => 'A type'
    ];

    public function fields(): array
    {
        return [
            "user" => [
                'type' => FacadesGraphQL::type('User'),
                'description' => "user"
            ],
            "token" => [
                "type" => Type::string(),
                "description" => "Name of user",
            ]
        ];
    }
}

And add the below code in User File.

<?php

declare(strict_types=1);

namespace App\GraphQL\Types;

use GraphQL\Type\Definition\Type;
use Rebing\GraphQL\Support\Type as GraphQLType;

class User extends GraphQLType
{
    protected $attributes = [
        'name' => 'User',
        'description' => 'A type'
    ];

    public function fields(): array
    {
        return [
            "name" => [
                "type" => Type::string(),
                "description" => "Name of user",
            ],
            "email" => [
                "type" => Type::string(),
                "description" => "User email",
            ]
        ];
    }
}

Step 12: Create login user graphql mutation

php artisan make:graphql:mutation LoginUser

And add the below code to LoginUser File.

<?php

declare(strict_types=1);

namespace App\GraphQL\Mutations;

use App\Models\User;
use Closure;
use GraphQL\Type\Definition\ResolveInfo;
use GraphQL\Type\Definition\Type;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\ValidationException;
use Rebing\GraphQL\Support\Facades\GraphQL;
use Rebing\GraphQL\Support\Mutation;
use Rebing\GraphQL\Support\SelectFields;

class LoginUser extends Mutation
{
    protected $attributes = [
        'name' => 'loginUser',
        'description' => 'A mutation'
    ];

    public function type(): Type
    {
        return GraphQL::type("User");
    }

    public function args(): array
    {
        return [
            'email' => [
                "name" => "email",
                "type" => Type::string()
            ],
            'password' => [
                "name" => "password",
                "type" => Type::string()
            ]
        ];
    }

    public function resolve($root, array $args, $context, ResolveInfo $resolveInfo, Closure $getSelectFields)
    {
        $fields = $getSelectFields();
        $select = $fields->getSelect();
        $with = $fields->getRelations();
        

        $user = User::where('email', $args['email'])->first();
        if (! $user || ! Hash::check($args['password'], $user->password)) {
            throw ValidationException::withMessages([
                'email' => ['The provided credentials are incorrect.'],
            ]);
        }

        return collect([
            "user" => $user,
            "token" => $user->createToken('App')->plainTextToken
        ]);
    }
}

Step 13: Add type and mutation in the graphql.php file

'schemas' => [
        'default' => [
            'query' => [
                // ExampleQuery::class,
            ],
            'mutation' => [
                "registerUser" => \App\GraphQL\Mutations\RegisterUser::class,
                "loginUser" => \App\GraphQL\Mutations\LoginUser::class,
            ],
            // The types only available in this schema
            'types' => [
                "RegisterUser" => \App\GraphQL\Types\RegisterUser::class,
                "LoginUser" => \App\GraphQL\Types\LoginUser::class,
	     "User" => \App\GraphQL\Types\User::class,
            ],

            // Laravel HTTP middleware
            'middleware' => null,

            // Which HTTP methods to support; must be given in UPPERCASE!
            'method' => ['GET', 'POST'],

            // An array of middlewares, overrides the global ones
            'execution_middleware' => null,
        ],
],

And clear the config cache. 

Step 14: Now open Postman

• Add Graphql endpoint – http://127.0.0.1/graphql 
• Select GraphQL in the body
• Add the below code in your Postman

mutation {
    loginUser(
        email: "test@gmail.com",
        password: "123456"
    )
    {
        user {
            email,
        }
        token
    }
}

Output – 

{
    "data": {
        "loginUser": {
            "user": {
                "email": "test@gmail.com"
            },
            "token": "1|r6RMyvy0UqWps2vWU8ujEUwX2ka9zmowBOB19kws"
        }
    }
}

Here a token is generated now; you can use this token for any after login process.

Conclusion: 

In this tutorial, we’ve learned how to create a user register and login GraphQL API in Laravel. If you have any doubts, share them with me through the comment section. Stay in touch with us to learn more about Laravel.

Happy Coding!