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.
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?
- See docs
Related frameworks: