Vue.js & PHP Quickstart
This is a quickstart guide to help you integrate Descope with your Vue.js & PHP application. Follow the steps below to get started.
Install Frontend SDK
Install the SDK with the following command:
npm i --save @descope/vue-sdkyarn add @descope/vue-sdkpnpm add @descope/vue-sdkbun i @descope/vue-sdkAdd Vue SDK to your Application
Start by importing Descope and add the Vue SDK to your application. You will need your Project ID from Project Settings in the Descope Console.
Note
You can also add the optional baseUrl parameter if you're utilizing a custom domain within your Descope project (ex: https://auth.company.com).
import { createApp } from "vue";
import App from "@/App.vue";
import router from "./router";
import descope, { getSdk } from "@descope/vue-sdk";
const app = createApp(App);
app.use(router);
app.use(descope, {
projectId: '__ProjectID__',
baseUrl: "<base url>", // Optional
});
const sdk = getSdk();
sdk?.onSessionTokenChange((newSession) => {
// here you can implement custom logic when the session is changing
});
app.mount("#app");Optional Client Auth Settings
You can customize client-side token behavior using optional parameters like persistTokens, and sessionTokenViaCookie. Learn more in the Auth Helpers documentation.
Use the SDK to Render a Specific Flow
To trigger the Descope Flow, you will need to add this component. The screens you've customized in your Flow will appear here. You can also customize the component with the following:
flowId: ID of the flow you wish to use@successand@error: functions that execute when authentication succeeds or fails
Note
For the full list of component customization options, refer to our Descope Components Doc.
<template>
<div class="wrapper">
<p v-if="isLoading">Loading...</p>
<div v-else-if="isAuthenticated">
<h1>You are authenticated</h1>
</div>
<Descope
v-else
:flowId="sign-up-or-in" // can be any flow id
@error="handleError"
@success="handleSuccess"
:errorTransformer="errorTransformer"
/>
</div>
</template>
<script setup>
import { Descope, useSession } from "@descope/vue-sdk";
const { isLoading, isAuthenticated } = useSession();
const handleError = (e) => {
console.log("Got error", e);
};
const handleSuccess = (e) => {
console.log("Logged in", e);
};
const errorTransformer = (error) => {
const translationMap = {
SAMLStartFailed: "Failed to start SAML flow",
};
return translationMap[error.type] || error.text;
};
</script>Utilize the Vue SDK Hooks and Functions
Descope provides many different hooks to check if the user is authenticated, session is loading etc. You can use these to customize the user experience:
isAuthenticated: Boolean for the authentication state of the current user session.isSessionLoading: Boolean for the loading state of the session. Can be used to display a "loading" message while the session is still loading.useUser: Returns information about the currently authenticated user.logout: Logs out the currently authenticated user.
Note
For the full list of available hooks and functions, refer to the Auth Helpers Doc.
<template>
<div v-if="isSessionLoading || isUserLoading">Loading ...</div>
<div v-else-if="isAuthenticated">
<div>Hello {{ user?.name }}</div>
<button @click="logout">Logout</button>
</div>
<div v-else>You are not logged in</div>
</template>
<script setup>
import { useDescope, useSession, useUser } from '@descope/vue-sdk';
const { isAuthenticated, isSessionLoading } = useSession();
const { user, isUserLoading } = useUser();
const { logout } = useDescope();
</script>Pass Session Token to Server API
Use getSessionToken to retrieve the session token, and pass it in the Authorization header of your API requests for server-side validation.
import { getSessionToken } from '@descope/vue-sdk';
// example fetch call with http header
export const fetchData = async () => {
const sessionToken = getSessionToken();
const res = await fetch('/path/to/server/api', {
headers: {
Authorization: `Bearer ${sessionToken}`
}
});
// ... use res
};At this point, you're done with the frontend. If you would like to also handle Session Management in your backend, keep on reading!
Install Backend SDK
Install the SDK with Composer using the following command:
composer require descope/descope-phpSet up Environment file
Create a .env file in the root directory of your project with your Descope Project ID, which can be found in the Console
If you plan to use Management functions, include a Descope Management Key here as well, which can be found here.
DESCOPE_PROJECT_ID=<Descope Project ID>
DESCOPE_MANAGEMENT_KEY=<Descope Management Key>Setup Backend SDK
You'll need to initialize a DescopeSDK object using your Project ID.
If you're using a custom domain with your Descope project, make sure to export the Base URL (e.g. export DESCOPE_BASE_URI="https://api.descope.com") when initializing descope_client.
require 'vendor/autoload.php';
use Descope\SDK\DescopeSDK;
$descopeSDK = new DescopeSDK([
'projectId' => $_ENV['DESCOPE_PROJECT_ID'],
'managementKey' => $_ENV['DESCOPE_MANAGEMENT_KEY'] // Optional, only used for Management functions
'baseUrl' => $_ENV['DESCOPE_BASE_URL'], // Optional, only used for custom domain or different regions
]);Implement Session Validation
You will need to then fetch the session token from the Authorization header of each request, and use the SDK to validate the token.
The frontend SDK will store the session token in either a cookie or your browser's local storage. If using a cookie, the token will be sent to your app server automatically with every request.
The $descopeSDK->verify($sessionToken) function can be used to verify a user's session as shown below. This returns a TRUE or FALSE depending on if the JWT is valid or not.
if (isset($_POST["sessionToken"])) {
if ($descopeSDK->verify($_POST["sessionToken"])) {
$_SESSION["user"] = json_decode($_POST["userDetails"], true);
$_SESSION["sessionToken"] = $_POST["sessionToken"];
session_write_close();
// User session validated and token saved
exit();
} else {
error_log("Session token verification failed.");
$descopeSDK->logout();
// Redirect to login page
exit();
}
} else {
error_log("Session token is not set in POST request.");
// Redirect to login page
exit();
}Checkpoint
Your application is now integrated with Descope. Please test with sign-up or sign-in use case.
Customize
Now that you have the end-to-end application working, you can choose to configure and personalize many different areas of Descope, including your brand, style, custom user authentication journeys, etc. We recommend starting with customizing your user-facing screens, such as signup and login.