Getting Started - Javascript

In this tutorial, we will create a simple page with a “Sign in” button. Once clicked, the user will be redirected to passwordless.ID to authenticate and return back to this page and show the user profile.

  • The demo can be seen here:
  • The full source code is available here:

Create an HTML page

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sign in with Passwordless.ID demo</title>
    <script type="module" src="sign-in-with.js" defer></script>
    <button id="sign-in" class="btn btn-light" onclick="app.signIn()">Sign In</button>

    <section id="profile" class="card shadow" hidden>
        <div class="card-body">
            <img id="picture" style="height:100px" />
            <h3 id="nickname">Nickname</h3>

    <button id="sign-out" class="btn btn-light" onclick="app.signOut()" hidden>Sign Out</button>

        <a href="">See the code on GitHub</a>

Trigger the sign-in

It uses the OAuth2 / OpenID flow using the @passwordless-id/connect library.

The code for that looks as follows.

import passwordless from ''

// the information requested from the profile
const scope = 'openid avatar email'

function onClickSignIn() => {
  // performs a redirect to let the user authenticate and/or authorize this app
  passwordless.auth({ scope })

function onClickSignOut = async () => {
  // performs a redirect to let the user sign out

async function init() {
  // retrieves the user profile and `id_token` if available
  const user = await{ scope })
  if (user.signedIn && user.scopeGranted)

Show the profile

The retrieved user has the following structure.

 "signedIn": true,
 "scopeGranted": true,
 "id_token": "eyJ0eXAiOiJK...",
 "profile": {
  "nickname": "Johny",
  "picture": "",
  "preferred_username": "johndoe",
  "...": "...more attributes depending on requested scope"

Trigger the sign-out

Using the token for API calls

Once you obtain the user, you can also send the token_id to your server API as proof of the user’s authenticity. This is a Json Web Token containing a signature that can be verified by common libraries.