Crossid

C

Javascript

This guide explains how to add login, logout and display user profile in vanilla JavaScript.

3 minutes reading

Using JavaScript directly allows for greater flexibility and control over the code as there are no abstractions or limitations imposed by a specific framework.

By following this guide, you will learn how to add user management into your apps using the @crossid/crossid-spa-js SDK directly without any wrappers.

If you don't use plain JavaScript, follow other framework guides such as React or Vue.

Configure Crossid

To use Crossid you have to setup an application via this page.

An application defines how authentication works for your project.

Configure Application

Use the right pane to select or create an application,

Every application in Crossid is assigned with a unique Client ID that should be defined in your code.

For advanced application settings, use the dashboard

Configure Login redirect URL

A login url is where Crossid will redirect users after they log in.

Code samples in this guide expects http://localhost:3000

Configure Logout redirect URL

A logout url is where Crossid will redirect users after they log out.

Code samples in this guide expects http://localhost:3000

Configure Web Origins (CORS)

Web origins is a URL that allows your SPA to interact with Crossid APIs.

Code samples in this guide expects http://localhost:3000*

Install the @crossid/crossid-spa-js

The @crossid/crossid-spa-js package provides the facility to implement a user management in JavaScript applications.

You can install the package via npm npm install @crossid/crossid-spa-js or refer directly via a CDN.

For simplicity, we include the package directly from CDN.

Create the Client

First lets create the Client object that provides the functionality needed to perform all user actions such login, logout and show user profile.

The client requires some configuration options such your app's client id and the redirect uri to return upon a successful login or logout.

If you have configured an app the code in previous step then the code snippet is already configured for your app.

Signup

Invoke the client.signupWithRedirect() method to start the signup process.

This method redirects the user to Crossid and starts a signup flow.

After finishing the signup process, the user will be logged in and directed back to the website.

Login

Invoke the client.loginWithRedirect() method to start the login process.

This method redirects the user to Crossid and starts a login flow,

Once the login process completes, the user will be redirected back to your website,

See next step how to complete the login process.

Handle login callback from Crossid

Upon a successful login, Crossid redirects the user back to your website with a code query param.

This code needs to be exchanged with a token that then can be used by your app to authenticate your services such as REST API

Invoke the client.handleRedirectCallback() method to exchange the code with a token.

For more information about tokens see OIDC tokens

Add logout

Invoke the client.logoutWithRedirect() method to start the logout process.

This method redirects the user to Crossid and starts a logout flow,

Once the logout process completes, the user will be redirected back to your website,

See next step how to complete the logout process.

Handle logout callback from Crossid

Upon a successful logout, Crossid redirects the user back to your website with a state query param.

Invoke the client.handleLogoutRedirectCallback() method to complete the logout process.

This will delete user tokens from user's storage (e.g., local storage).

Show user profile

When user is authenticated, it is common to display details such email or name.

Call the client.getUser() to get the user details.

Recap

In this tutorial we have seen how to signup new users, login and logout users in Javascript

We could also display details of authenticated users.

Where to go Next?

Related frameworks: