Credentials Authentication

Home
Documents
Get Started Auth Credentials

Credentials Authentication

Credentials authentication allows users to sign in to applications using their email address and password. This approach requires users to create and remember new credentials for each application they use. It also provides developers with a secure and reliable way to authenticate users without having to rely on third-party services for authentication.

Prisma PHP supports credentials authentication through the use of email and password fields in your application's user database. By integrating credentials authentication into your application, you can allow users to sign in using their email address and password, making it easier for users to access your application and for developers to implement user authentication and authorization features.

Setting Up Credentials Authentication

Setting up credentials authentication in Prisma PHP involves creating a user database with email and password fields to store user credentials securely. To get started, you'll need to define a user model with email and password fields in your Prisma schema and generate the necessary database migrations to create the user table in your database. Once you have the user database set up, you can implement credentials authentication in your Prisma PHP application to enable users to sign in using their email address and password.

Creating a User Model

To create a user model with email and password fields in your Prisma schema, you can define a new model in your schema.prisma file with the following fields:

model User {
    id            String    @id @default(cuid())
    name          String?
    email         String?   @unique
    password      String?
    emailVerified DateTime?
    image         String?
  
    roleId   Int?
    userRole UserRole? @relation(fields: [roleId], references: [id])
  
    @@map("Users")
  }
  
  model UserRole {
    id   Int    @id @default(autoincrement())
    name String @unique
  
    user User[]
  }

Remember to generate your PHP classes for this to work by running the following command in your terminal:

npx php generate class

For more info go to Prisma PHP Command.

In this example, we're defining a user model with an id field that auto-increments for each new user, an email field that is unique for each user, and a password field that stores the user's password securely. The email field is marked as unique to ensure that each user has a unique email address, and the password field is used to store the user's password securely in the database, always hashed and salted.

**Note:** Prisma PHP by default sets the User and UserRole models when you choose to use Prisma PHP ORM in your project. You can modify these models as needed.

Generating Database Migrations

After defining the user model in your Prisma schema, you'll need to generate database migrations to create the user table in your database. To generate a new migration, or update the existing migration, go to Prisma Commands

Implementing Credentials Authentication

Once you've created the user database with email and password fields, you can implement credentials authentication in your Prisma PHP application by verifying user credentials during the sign-in process. To authenticate users, you'll need to compare the email and password provided by the user with the email and password stored in the user database. If the credentials match, you can grant the user access to the application; otherwise, you can display an error message indicating that the credentials are invalid.

register a user, you need to create a register route form to allow users to create an account and store their credentials in the database.

Here's an example of how you can implement a register form in Prisma PHP:

Register User for Default Authentication Mode: All Routes are Public

First, create your register route in your app directory at src/app/auth/register/index.php where you will add the following code:

<?php

use Lib\Auth\Auth;
use Lib\Prisma\Classes\Prisma;
use Lib\Validator;
use Lib\Request;

$auth = Auth::getInstance();

if ($auth->isAuthenticated()) {
  Request::redirect('/dashboard');
}

function register($data)
{
  $name = Validator::string($data->name);
  $email = Validator::email($data->email);
  $password = Validator::string($data->password);
  $confirmPassword = Validator::string($data->confirmPassword);

  if (!$name || !$email || !$password || !$confirmPassword) {
    return [
      'message' => 'All fields are required'
    ];
  } elseif ($password !== $confirmPassword) {
    return [
      'message' => 'Passwords do not match'
    ];
  } else {
    $prisma = Prisma::getInstance();
    $userExist = $prisma->user->findUnique([
      'where' => [
        'email' => $email
      ]
    ]);

    if ($userExist) {
      return [
        'message' => 'Email already exists'
      ];
    } else {
      $prisma->user->create([
        'data' => [
          'name' => $name,
          'email' => $email,
          'password' => password_hash($password, PASSWORD_DEFAULT),
          'userRole' => [
            'connectOrCreate' => [
              'where' => [
                'name' => 'User'
              ],
              'create' => [
                'name' => 'User'
              ]
            ]
          ]
        ]
      ]);

      Request::redirect('/auth/login');
    }
  }
}

?>

<div class="min-h-screen flex items-center justify-center bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
    <h1 class="text-2xl font-bold mb-6">Register</h1>
    <form class="space-y-4" onsubmit="register" pp-after-request="registerResponse">
      <div>
        <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
        <input type="text" name="name" id="name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
      </div>
      <div>
        <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
        <input type="email" name="email" id="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
      </div>
      <div>
        <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
        <input type="password" name="password" id="password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
      </div>
      <div>
        <label for="confirmPassword" class="block text-sm font-medium text-gray-700">Confirm Password</label>
        <input type="password" name="confirmPassword" id="confirmPassword" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
      </div>
      <div>
        <button type="submit" name="register" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-xs text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Register</button>
      </div>
    </form>
    <div class="mt-4">
      <p class="text-red-500" id="register-message"></p>
    </div>
    <div class="mt-4">
      <a href="/auth/login" class="text-indigo-600 hover:text-indigo-900 hover:underline">Login</a>
    </div>
  </div>
</div>

<script>
  function registerResponse(data) {
    const messageContent = document.getElementById('register-message');
    const message = data?.response?.message ?? '';

    messageContent.innerText = message;
  }
</script>

Register User for Private Route Authentication Mode

When the authentication mode is set to IS_ALL_ROUTES_PRIVATE = true in Lib/Auth/AuthConfig.php, all routes in your application will require user authentication. This means that users must be signed in to access any part of the application. This mode is ideal for applications where all content is restricted to authenticated users only.

When all routes are private, the $authRoutes array in Lib/Auth/AuthConfig.php determines which routes are accessible to unauthenticated users. This prevents authenticated routes from being accessed without proper authentication and redirects users to the dashboard if they try to access them. To organize your authentication routes, create a new group route for authentication and place the signup route in this group. For example, create the signup route in your app directory at src/app/(auth)/signup/index.php and add the following code:

<?php

use Lib\Prisma\Classes\Prisma;
use Lib\Validator;
use Lib\Request;

function register($data)
{
    $name = Validator::string($data->name);
    $email = Validator::email($data->email);
    $password = Validator::string($data->password);
    $confirmPassword = Validator::string($data->confirmPassword);

    if (!$name || !$email || !$password || !$confirmPassword) {
        return [
            'message' => 'All fields are required'
        ];
    } elseif ($password !== $confirmPassword) {
        return [
            'message' => 'Passwords do not match'
        ];
    } else {
        $prisma = Prisma::getInstance();
        $userExist = $prisma->user->findUnique([
            'where' => [
                'email' => $email
            ]
        ]);

        if ($userExist) {
            return [
                'message' => 'Email already exists'
            ];
        } else {
            $prisma->user->create([
                'data' => [
                    'name' => $name,
                    'email' => $email,
                    'password' => password_hash($password, PASSWORD_DEFAULT),
                    'userRole' => [
                        'connectOrCreate' => [
                            'where' => [
                                'name' => 'User'
                            ],
                            'create' => [
                                'name' => 'User'
                            ]
                        ]
                    ]
                ]
            ]);

            Request::redirect('/auth/login');
        }
    }
}

?>

<div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
        <h1 class="text-2xl font-bold mb-6">Register</h1>
        <form class="space-y-4" onsubmit="register" pp-after-request="registerResponse">
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                <input type="text" name="name" id="name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
            </div>
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                <input type="email" name="email" id="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
            </div>
            <div>
                <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                <input type="password" name="password" id="password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
            </div>
            <div>
                <label for="confirmPassword" class="block text-sm font-medium text-gray-700">Confirm Password</label>
                <input type="password" name="confirmPassword" id="confirmPassword" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
            </div>
            <div>
                <button type="submit" name="register" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-xs text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Register</button>
            </div>
        </form>
        <div class="mt-4">
            <p class="text-red-500" id="register-message"></p>
        </div>
        <div class="mt-4">
            <a href="/signin" class="text-indigo-600 hover:text-indigo-900 hover:underline">Login</a>
        </div>
    </div>
</div>

<script>
    function registerResponse(data) {
        const messageContent = document.getElementById('register-message');
        const message = data?.response?.message ?? '';

        messageContent.innerText = message;
    }
</script>

Creating a Login Form for Default Authentication Mode: All Routes are Public

After creating the register form, you can create a login form to allow users to sign in to the application using their email address and password. Here's an example of how you can implement a login form in Prisma PHP:

first create your login route in your app directory src/app/auth/login/index.php this is just a example route and add the following code:

<?php

use Lib\Validator;
use Lib\Prisma\Classes\Prisma;
use Lib\Auth\Auth;
use Lib\Request;

$auth = Auth::getInstance();

if ($auth->isAuthenticated()) {
    Request::redirect('/dashboard');
}

function login($data)
{
    $email = Validator::email($data->email);
    $password = Validator::string($data->password);

    if (!$email || !$password) {
        return [
            'message' => 'All fields are required'
        ];
    }

    $prisma = Prisma::getInstance();
    $user = $prisma->user->findUnique([
        'where' => [
            'email' => $email
        ]
    ], true);

    if (!$user) {
        return [
            'message' => 'User not found'
        ];
    } else {
        if (!password_verify($password, $user->password)) {
            return [
                'message' => 'Invalid password'
            ];
        }

        $auth = Auth::getInstance();
        $auth->signIn($user);

        Request::redirect('/dashboard');
    }
}

?>

<div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
        <h1 class="text-2xl font-bold mb-6 text-center">Login</h1>
        <form class="space-y-6" onsubmit="login" pp-after-request="loginResponse">
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                <input type="email" name="email" id="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
            </div>
            <div>
                <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                <input type="password" name="password" id="password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
            </div>
            <div>
                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-xs text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Login</button>
            </div>
        </form>
        <div class="mt-4">
            <p class="text-red-500" id="login-message"></p>
        </div>
        <div class="mt-6 text-center">
            <a href="/auth/register" class="text-indigo-600 hover:text-indigo-900 hover:underline">Register</a>
        </div>
    </div>
</div>

<script>
    function loginResponse(data) {
        const messageContent = document.getElementById('login-message');
        const message = data?.response?.message ?? '';

        messageContent.innerText = message;
    }
</script>

Creating a Login Form for Private Route Authentication Mode

When all routes are private, the $authRoutes array in Lib/Auth/AuthConfig.php determines which routes are accessible to unauthenticated users. This prevents authenticated routes from being accessed without proper authentication and redirects users to the dashboard if they try to access them. To organize your authentication routes, create a new group route for authentication and place the login route in this group. For example, create the signin route in your app directory at src/app/(auth)/signin/index.php and add the following code:

<?php

use Lib\Validator;
use Lib\Prisma\Classes\Prisma;
use Lib\Auth\Auth;

function login($data)
{
    $email = Validator::email($data->email);
    $password = Validator::string($data->password);

    if (!$email || !$password) {
        return [
            'message' => 'All fields are required'
        ];
    }

    $prisma = Prisma::getInstance();
    $user = $prisma->user->findUnique([
        'where' => [
            'email' => $email
        ]
    ], true);

    if (!$user) {
        return [
            'message' => 'User not found'
        ];
    } else {
        if (!password_verify($password, $user->password)) {
            return [
                'message' => 'Invalid password'
            ];
        }

        $auth = Auth::getInstance();
        $auth->signIn($user);
    }
}

?>

<div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-md">
        <h1 class="text-2xl font-bold mb-6 text-center">Login</h1>
        <form class="space-y-6" onsubmit="login" pp-after-request="loginResponse">
            <div>
                <label for="email" class="block text-sm font-medium text-gray-700">Email</label>
                <input type="email" name="email" id="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
            </div>
            <div>
                <label for="password" class="block text-sm font-medium text-gray-700">Password</label>
                <input type="password" name="password" id="password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-xs focus:outline-hidden focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
            </div>
            <div>
                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-xs text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Login</button>
            </div>
        </form>
        <div class="mt-4">
            <p class="text-red-500" id="login-message"></p>
        </div>
        <div class="mt-6 text-center">
            <a href="/signup" class="text-indigo-600 hover:text-indigo-900 hover:underline">Register</a>
        </div>
    </div>
</div>

<script>
    function loginResponse(data) {
        const messageContent = document.getElementById('login-message');
        const message = data?.response?.message ?? '';

        messageContent.innerText = message;
    }
</script>

**Note:** Understanding the difference between public and private routes is crucial. When all routes are public, you must manually set the redirect route after sign-in or sign-up, which is useful if your application has more public routes. Conversely, when all routes are private, users are automatically redirected to the appropriate page after sign-in or sign-up. This approach is ideal for applications where all content is restricted to authenticated users. Choose the approach that best fits your application's needs to ensure security and user-friendliness.

When all routes are public, use public static array $privateRoutes = [] in AuthConfig.php to specify the private routes.

When all routes are private, use public static array $publicRoutes = ['/'] in AuthConfig.php. By default, only the home page ("/") is public.

After creating the login form, you can implement credentials authentication in your Prisma PHP application by verifying user credentials during the sign-in process. To authenticate users, you'll need to compare the email and password provided by the user with the email and password stored in the user database. If the credentials match, you can grant the user access to the application; otherwise, you can display an error message indicating that the credentials are invalid.

Conclusion

By setting up credentials authentication in Prisma PHP, you can enable users to sign in to your application using their email address and password. This approach provides a secure and reliable way to authenticate users without having to rely on third-party services for authentication. With credentials authentication, you can create a user database with email and password fields to store user credentials securely and implement user authentication and authorization features in your Prisma PHP application.