Vue.js & Java Quickstart
This is a quickstart guide to help you integrate Descope with your Vue.js & Java application. Follow the steps below to get started.
Add 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 CNAME within your Descope project (ex: https://auth.company.com
).
Use the SDK to Render a Specific Flow
In your Vue template, use the <Descope>
component to render a specific authentication flow. Customize this component with properties like flowId
, @error
, @success
, and optional attributes for theming, debug mode, and more:
theme
: "light" or "dark" modetenant
: Tenant ID you can pass in for SSOredirectUrl
: Redirect URL for OAuth and SSO (will be used when redirecting back from the OAuth provider / IdP), or for "Magic Link" and "Enchanted Link" (will be used as a link in the message sent to the the user). When configured within the flow, it overrides the configuration within the Descope console.:errorTransformer
: this is a function that receives an error object and returns a string. The returned string will be displayed to the user. errorTransformer is not required. If not provided, the error object will be displayed as is. Learn more about how to use the errorTransformer here.validateOnBlur
: a boolean to configure whether field validation is performed when clicking away from the field (true
) or on form submission (false
)form
: You can optionally pass flow inputs, such as email addresses, names, etc., from your app's frontend to your flow. The configured form inputs can be used within flow screens, actions, and conditionals prefixed withform
.- Ex:
form={{ email: "predefinedname@domain.com", firstName: "test", "customAttribute.test": "aaaa", "myCustomInput": 12 }}
- Ex:
client
: You can optionally pass flow inputs from your app's frontend to your flow. The configured client inputs can be used within flow actions and conditionals prefixed with client..- Ex:
client={{ version: "1.2.0" }}
- Ex:
Note
More built in functions can be found on the SDK README. You can refer to the rest of the code in Login.vue as an example of implementation. Also note that, Descope stores the last user information in local storage. If you wish to disable this feature, you can pass storeLastAuthenticatedUser
as false
to the AuthProvider
component. Please note that some features related to the last authenticated user may not function as expected if this behavior is disabled.
Getting User Details
To extract details on the user, you can load the user details from e.detail.user
. On successful authentication, the information about the user is returned and accessible with e.detail.user
.
@success
- function that executes when authentication succeeds
Example:
Alternatively, you can also use the me function which fetches the current authenticated user information.
Utilize the Vue SDK Hooks and Functions
Use the useDescope
, useSession
, and useUser
functions in your components to manage authentication state, user details, and utilities like a logout button.
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.
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 by including the SDK in your pom.xml
file (for installation via Maven).
Import and Setup Backend SDK
You'll need import and setup all of the packages from the SDK.
If you're using a CNAME 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
.
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.
Congratulations
Now that you've got the authentication down, go focus on building out the rest of your app!
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.