English
  • Deutsch
  • English
  • Français
  • Español
  • Português
  • 日本語
vue logo
javascript logo
lumen logo
php logo
Authentication
Authorization
Role-Based Access Control

Hello World Full-Stack Security: Vue.js + Lumen

Authentication
Authorization
Role-Based Access Control
Dan Arias
By Dan Arias, R&D Engineering ManagerLast update on November 19, 2021

Developers can easily secure a full-stack application using Auth0. This code sample demonstrates how to implement authentication in a client application built with Vue.js and JavaScript, as well as how to implement authorization in an API server built with Lumen and PHP. You'll connect the client and server applications to see the full security flow in action!

Let's get started!

Quick Auth0 Set Up

To get started, create an Auth0 account to connect your application with the Auth0 Identity Platform. You can also use any of your existing Auth0 accounts.

Get the Auth0 domain and client ID

  • Open the Applications section of the Auth0 Dashboard.

  • Click on the Create Application button and fill out the form with the following values:

    • Name: Hello World Client

    • Application Type: Single Page Web Applications

  • Click on the Create button.

Visit the "Register Applications" document for more details.

An Auth0 Application page loads up.

As such, click on the "Settings" tab of your Auth0 Application page, locate the "Application URIs " section, and fill in the following values:

  • Allowed Callback URLs: http://localhost:4040

  • Allowed Logout URLs: http://localhost:4040

  • Allowed Web Origins: http://localhost:4040

Scroll down and click the "Save Changes" button.

Next, locate the "Basic Information" section.

Auth0 application settings to enable user authentication

When you enter a value in the input fields present on this page, any code snippet that uses such value updates to reflect it. Using the input fields makes it easy to copy and paste code as you follow along. For security, these values are stored in memory and only used locally. They are gone as soon as you refresh the page! As an extra precaution, you should use values from an Auth0 test application instead of a production one.

As such, enter the "Domain" and "Client ID" values in the following fields to set up your single-page application in the next section:

Get the Auth0 audience

  • Open the APIs section of the Auth0 Dashboard.

  • Click on the Create API button and fill out the "New API" form with the following values:

    • Name: Hello World Server

    • Identifier: https://hello-world.example.com

  • Click on the Create button.

Visit the "Register APIs" document for more details.

When setting up APIs, we also refer to the API identifier as the Audience value. Store that value in the following field to set up your API server in the next section:

Set Up and Run the Lumen Project

Start by cloning the Lumen project and checking out the basic-role-based-access-control branch:

git clone https://github.com/auth0-developer-hub/api_lumen_php_hello-world.git --branch basic-role-based-access-control

Make the project directory your current working directory:

cd api_lumen_php_hello-world

Install the Lumen project dependencies:

composer install

Now, create a .env file under the project directory and populate it as follows:

.env
PORT=6060
CLIENT_ORIGIN_URL=http://localhost:4040
AUTH0_AUDIENCE=AUTH0-AUDIENCE
AUTH0_DOMAIN=AUTH0-DOMAIN

Execute the following command to run the Lumen API server:

php -S localhost:6060 -t public

Optional: Add Caching to Your Project

The Auth0 PHP SDK supports (and recommends) using a PSR-6 Compatible Caching Library to increase the performance of the authorization process. You can use that library to temporarily store the JWKS public keys. Adding this cache layer avoids making a request to the Auth0 well-known endpoint every time you need to verify an access token.

Follow these steps to add cache to this project.

Start by adding the symfony/cache dependency:

composer require symfony/cache

You need this dependency as it provides an adapter that wraps Lumen's cache as a PSR-6 compatible interface, which the Auth0 PHP SDK requires.

Set the cache driver on your .env file using a CACHE_DRIVER variable:

.env
PORT=6060
CLIENT_ORIGIN_URL=http://localhost:4040
AUTH0_AUDIENCE=AUTH0-AUDIENCE
AUTH0_DOMAIN=AUTH0-DOMAIN
CACHE_DRIVER=file

Lumen supports a wide variety of cache drivers. Please refer to the "Cache" Lumen document for more details.

Now, create a cache.php file under the config directory to configure your cache:

config/cache.php
<?php
return [
'default' => env('CACHE_DRIVER'),
'stores' => [
'file' => [
'driver' => 'file',
'path' => env('CACHE_PATH', storage_path('framework/cache')),
],
],
];

This cache configuration will vary depending on the driver that you choose to use.

Next, update the bootstrap/app.php file to make your cache config file available to Lumen:

bootstrap/app.php
<?php
//...
// Make the cache config file available for the application
$app->configure('cache');
//...

Finally, open the config/auth0.php file and add useCache to enable caching for Auth0:

config/auth0.php
<?php
return [
'domain' => env('AUTH0_DOMAIN'),
'audience' => [ env('AUTH0_AUDIENCE') ],
'useCache' => true // Add this line
];
//...

Set Up and Run the Vue.js Project

Start by cloning the project into your local machine:

git clone https://github.com/auth0-developer-hub/spa_vue_javascript_hello-world.git --branch basic-authentication

You are checking out the basic-authentication branch, which holds all the Vue.js code related to implementing user login with Auth0.

Make the project directory your current working directory:

cd spa_vue_javascript_hello-world

Next, install the Vue.js project dependencies:

npm install

Once you have access to the Vue.js project, create a .env file under the project directory and populate it as follows:

.env
VUE_APP_AUTH0_DOMAIN=AUTH0-DOMAIN
VUE_APP_AUTH0_CLIENT_ID=AUTH0-CLIENT-ID
VUE_APP_AUTH0_AUDIENCE=https://hello-world.example.com
VUE_APP_API_SERVER_URL=http://localhost:6060

Run the Vue.js application by issuing the following command:

npm run serve

You can now visit http://localhost:4040/ to access the application.

There's something missing in this Vue.js code sample. There's no login or sign-up forms!

When you click on the "Log In" button, Vue.js takes you to the Auth0 Universal Login page. Your users can log in to your application through a page hosted by Auth0, which provides them with a secure, standards-based login experience that you can customize with your own branding and various authentication methods, such as logging in with username and password or with a social provider like Facebook or Google.

Once you log in, visit the protected "Profile" page, http://localhost:4040/profile, to see all the user profile information that Auth0 securely shares with your application using ID tokens.

Then, visit the "External API" page, http://localhost:4040/external-api, to practice requesting protected resources from an external API server using access tokens. Before you can do that, you need to set up and configure an API with Auth0. It'll be quick!

Set Up Role-Based Access Control (RBAC)

The access token present in the authorization header of a request must include a permissions claim that contains the read:admin-messages permission to access the GET /api/messages/admin endpoint.

You can use the Auth0 Dashboard to enable Role-Based Access Control (RBAC) and then implement it by creating API permissions, assigning those permissions to a role, and assigning that role to a user.

Enable Role-Based Access Control (RBAC)

  • Open the APIs section of the Auth0 Dashboard and select your "Hello World Server" registration.

  • Click on the "Settings" tab and locate the "RBAC Settings" section.

  • Switch on the "Enable RBAC" and "Add Permissions in the Access Token" options.

Visit the "Role-Based Access Control" document for more details.

Create an API permission

In the same Auth0 API registration page, follow these steps:

  • Click on the "Permissions" tab and fill a field from the "Add a Permission (Scope)" section with the following information:

    • Permission (Scope): read:admin-messages
    • Description: Read admin messages
  • Click the "+ Add" button to store the permission.

Visit the "Add API Permissions" document for more details.

Create a role with permissions

Create a role

  • Open the Roles section of the Auth0 Dashboard.

  • Click on the Create role button and fill out the "New Role" form with the following values:

    • Name: messages-admin

    • Description: Read admin messages.

  • Click on the Create button.

Visit the "Create Roles" document for more details.

Add permissions to the role

  • Click on the "Permissions" tab of the roles page.

  • Click on the "Add Permissions" button.

  • Select the "Hello World Server" from the dropdown menu that comes up and click the "Add Permissions" button.

  • Select all the permissions available by clicking on them one by one or by using the "All" link.

  • Finally, click on the "Add Permissions" button to finish up.

Visit the "Add Permissions to Roles" document for more details.

Create an admin user

  • Open the Users section from the Auth0 Dashboard.

  • Click on the "Create user" button and fill out the form with the required information. Alternatively, you can also click on any of your existing users to give one of them the admin role.

  • On the user's page, click on the "Roles" tab and then click on the "Assign Roles" button.

  • Select the messages-admin role from the dropdown menu and click on the "Assign" button.

Visit the "Assign Roles to Users" document for more details.

Access the admin endpoint

When a user with the messages-admin role logs into the "Hello World" client application also protected by Auth0, the user's access token will have the required permissions to access the GET /api/messages/admin endpoint.

If you visit http://localhost:4040/external-api, you'll see that the user interface hydrates with data coming from the protected resources of the API server. If your full-stack application system is not configured correctly, you may see an error (such as 401 Unauthorized) or no data at all.