Password Authentication with Client SDKs

This guide is meant for developers that are NOT using Descope Flows to design login screens and authentication methods.

If you'd like to use Descope Flows, Quick Start should be your starting point.

The Password-based authentication method lets you authenticate end users using a secret string of characters known only to the user.

Descope recommends using an email address as the user identifier; this allows you to utilize passwordless methods like Magic Link in addition to passwords. These methods could be used for authentication when users forget their password or need to reset it easily.

Use Cases

New user signup: The following actions must be completed, first User Sign-Up this returns a jwt for the user.
Existing user signin: The following actions must be completed, first User Sign-In this returns a jwt for the user.

Client SDK

Install SDK

Terminal

npm i --save @descope/react-sdk

Terminal

npm i --save @descope/nextjs-sdk

Terminal

npm i --save @descope/web-js-sdk

Terminal

npm i --save @descope/vue-sdk

Terminal

npm i --save @descope/angular-sdk

Import and initialize SDK

For more information about the baseUrl, baseStaticUrl, and baseCdnUrl parameters, refer to the Base URL Configuration section.

Parameters:

baseUrl: Custom domain that must be configured to manage token response in cookies. This makes sure every request to our service is through your custom domain, preventing accidental domain blockages.
baseStaticUrl: Custom domain to override the base URL that is used to fetch static files.
baseCdnUrl: Custom domain to override the base URL used to load external script assets (e.g., SDKs or widgets) dynamically at runtime.
persistTokens: Controls whether session tokens are stored in browser localStorage. Enabled by default and accessible via getToken(). Set to false to avoid client-side storage of tokens to reduce XSS risk.
autoRefresh: Controls whether the session is automatically refreshed when the token is expired. Enabled by default. Set to false to disable automatic refresh of the session.
sessionTokenViaCookie: Controls whether the session token is stored in a cookie instead of localStorage. If persistTokens is true, then by default, the token is stored in localStorage. Set this to true to store the token in a JS cookie instead.
storeLastAuthenticatedUser: Determines if the last authenticated user's info is saved in localStorage. Enabled by default and accessible via getUser(). Set to false to disable this behavior.
keepLastAuthenticatedUserAfterLogout: Controls whether user info is kept after logout. Disabled by default. Set to true to store user data on logout.

import { AuthProvider } from '@descope/react-sdk'
import { Descope, useDescope } from '@descope/react-sdk'

const AppRoot = () => {
	return (
      <AuthProvider
          projectId="__ProjectID__"
          baseUrl="https://auth.app.example.com"
          baseCdnUrl="https://assets.app.example.com" // specify a custom CDN URL for fetching external scripts and resources
          persistTokens={true} // set to `false` to disable token storage in browser to prevent XSS
          autoRefresh={true} // set to `false` to disable automatic refresh of the session
          sessionTokenViaCookie={false} // set to `true` to store the session token in a JS cookie instead of localStorage
          storeLastAuthenticatedUser={true} // set to `false` to disable storing last user
          keepLastAuthenticatedUserAfterLogout={false} // set to `true` to persist user info after logout
        >
        <App />
      </AuthProvider>
	);
};

import { AuthProvider } from '@descope/nextjs-sdk';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <AuthProvider
      projectId="__ProjectID__"
      baseUrl="<URL>"
      baseCdnUrl="https://assets.app.example.com" // specify a custom CDN URL for fetching external scripts and resources
      persistTokens={true} // set to `false` to disable token storage in browser to prevent XSS
      autoRefresh={true} // set to `false` to disable automatic refresh of the session
      sessionTokenViaCookie={false} // set to `true` to store the session token in a JS cookie instead of localStorage
      storeLastAuthenticatedUser={true} // set to `false` to disable storing last user
      keepLastAuthenticatedUserAfterLogout={false} // set to `true` to persist user info after logout
    >
      <html lang="en">
        <body>{children}</body>
      </html>
    </AuthProvider>
  );
}

import DescopeSdk from '@descope/web-js-sdk';
try {
  const descopeSdk = DescopeSdk({
    projectId: '__ProjectID__',
    baseUrl: 'https://auth.app.example.com',
    baseCdnUrl="https://assets.app.example.com", // specify a custom CDN URL for fetching external scripts and resources
    persistTokens: true, // set to `false` to disable token storage in browser to prevent XSS
    autoRefresh: true, // set to `false` to disable automatic refresh of the session
    sessionTokenViaCookie: false, // set to `true` to store the session token in a JS cookie instead of localStorage
    storeLastAuthenticatedUser: true, // set to `false` to disable storing last user
    keepLastAuthenticatedUserAfterLogout: false, // set to `true` to persist user info after logout
  });
} catch (error) {
  // handle the error
    console.log("failed to initialize: " + error)
}

import { createApp } from "vue";
import App from "@/App.vue";
import descope, { getSdk } from "@descope/vue-sdk";

const app = createApp(App);
app.use(router);

app.use(descope, {
  projectId: '__ProjectID__',
  baseUrl: "<base url>",
  baseCdnUrl: "https://assets.app.example.com", // specify a custom CDN URL for fetching external scripts and resources
  persistTokens: true, // set to `false` to disable token storage in browser to prevent XSS
  autoRefresh: true, // set to `false` to disable automatic refresh of the session
  sessionTokenViaCookie: false, // set to `true` to store the session token in a JS cookie instead of localStorage
  storeLastAuthenticatedUser: true, // set to `false` to disable storing last user
  keepLastAuthenticatedUserAfterLogout: false, // set to `true` to persist user info after logout
});

const sdk = getSdk();
sdk?.onSessionTokenChange((newSession) => {
  // here you can implement custom logic when the session is changing
});

// app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DescopeAuthModule, DescopeAuthService, descopeInterceptor } from '@descope/angular-sdk';
import { AppComponent } from './app.component';
import {
  HttpClientModule,
  provideHttpClient,
  withInterceptors
} from '@angular/common/http';
import { zip } from 'rxjs';

export function initializeApp(authService: DescopeAuthService) {
  return () => zip([authService.refreshSession(), authService.refreshUser()]);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DescopeAuthModule.forRoot({
      projectId: 'YOUR_PROJECT_ID',
      baseUrl: '<URL>',
      baseCdnUrl: "https://assets.app.example.com", // specify a custom CDN URL for fetching external scripts and resources
      persistTokens: true, // set to `false` to disable token storage in browser to prevent XSS
      autoRefresh: true, // set to `false` to disable automatic refresh of the session
      sessionTokenViaCookie: false, // set to `true` to store the session token in a JS cookie instead of localStorage
      storeLastAuthenticatedUser: true, // set to `false` to disable storing last user
      keepLastAuthenticatedUserAfterLogout: false // set to `true` to persist user info after logout
    })
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [DescopeAuthService],
      multi: true
    },
    provideHttpClient(withInterceptors([descopeInterceptor]))
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

OIDC Configuration

If you're using our SDK as an OIDC client with our Federated Apps, you can initialize the oidcConfig parameter with the following items:

applicationId: This is the application id, that can be found within the settings of your Federated Application
redirectUri: This is the url that will be redirected to if the user is unauthenticated. The default redirect URI will be used if not provided.
scope: This is a string of the scopes that the OIDC client will request from Descope. This should be one string value with spaces in between each scope. The default scopes are: 'openid email roles descope.custom_claims offline_access'

For registering a new user, your application client should accept user information, including an email or phone number used for verification. The application client should then send this information to your application server. Signing up via password returns the user's JWT.

// Args:
//    loginId (str): The login ID of the user being signed up
const loginId = "email@company.com"
//    password (str): The new user's password
const password = "xxxxxx"
//    user (dict) optional: Preserve additional user metadata in the form of
const user = { "name": "Joe Person", "phone": "+15555555555", "email": "email@company.com"}

const descopeSdk = useDescope();
const resp = await descopeSdk.password.signUp(loginId, password, user);
if (!resp.ok) {
  console.log("Failed to sign up via password")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully signed up via password")
  console.log(resp);
}

// Args:
//    loginId (str): The login ID of the user being signed up
const loginId = "email@company.com"
//    password (str): The new user's password
const password = "xxxxxx"
//    user (dict) optional: Preserve additional user metadata in the form of
const user = { "name": "Joe Person", "phone": "+15555555555", "email": "email@company.com"}

const resp = await descopeSdk.password.signUp(loginId, password, user);
if (!resp.ok) {
  console.log("Failed to sign up via password")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully signed up via password")
  console.log(resp);
}

<script>
  let descopeSdk = Descope({projectId: '__ProjectID__', persistTokens: true, autoRefresh: true });

  async function passwordSignUp() {
    // Args:
    //    user: Optional user object to populate new user information.
    const user = {
      "name": document.getElementById("name").value,
      "phone": document.getElementById("phone").value,
      "email": document.getElementById("email").value
    }
    //    password (str): The new user's password
    const password = document.getElementById("password").value
    //    loginId: email or phone - becomes the loginId for the user from here on and also used for delivery
    const loginId = document.getElementById("email").value

    const resp = await descopeSdk.password.signUp(loginId, password, user);
    if (!resp.ok) {
      window.alert("Failed to finish signup flow\nStatus Code: " + resp.code
        + "\nError Code: " + resp.error.errorCode + "\nError Description: " + resp.error.errorDescription + "\nError Message: " + resp.error.errorMessage)
    }
    else {
      console.log("Successfully finished signup flow")
      window.location.replace("../loggedIn.html?userId=" + encodeURIComponent(loginId) + "&sessionJwt=" + resp.data.sessionJwt)
    }
  }
</script>

For authenticating a user, your application client should accept the user's identity (typically an email address or phone number) and password. The application client should send this information to your application server. Signing in via password returns the user's JWT.

// Args:
//    loginId (str): The login ID of the user being signed in
const loginId = "email@company.com"
//    password (str): The user's password
const password = "xxxxxx"

const descopeSdk = useDescope();
const loginOptions = {
  customClaims: {
    claim1: "yes"
  }
}
const resp = await descopeSdk.password.signIn(loginId, password, loginOptions);
if (!resp.ok) {
  console.log("Failed to sign in via password")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully signed in via password")
  console.log(resp);
}

// Args:
//    loginId (str): The login ID of the user being signed in
const loginId = "email@company.com"
//    password (str): The user's password
const password = "xxxxxx"
const loginOptions = {
  customClaims: {
    claim1: "yes"
  }
}
const resp = await descopeSdk.password.signIn(loginId, password, loginOptions);
if (!resp.ok) {
  console.log("Failed to sign in via password")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully signed in via password")
  console.log(resp);
}

<script>
  let descopeSdk = Descope({projectId: "__ProjectID__", persistTokens: true, autoRefresh: true});

  async function passwordSignIn() {
    // Args:
    //    loginId: email or phone for the user
    const loginId = document.getElementById("loginId").value
    //    password (str): The new user's password
    const password = document.getElementById("password").value
    const loginOptions = {
      customClaims: {
        claim1: "yes"
      }
    }
    const resp = await descopeSdk.password.signIn(loginId, password, loginOptions);
    if (!resp.ok) {
      window.alert("Failed to finish signin flow\nStatus Code: " + resp.code
        + "\nError Code: " + resp.error.errorCode + "\nError Description: " + resp.error.errorDescription + "\nError Message: " + resp.error.errorMessage)
    }
    else {
      console.log("Successfully finished signin flow")
      window.location.replace("../loggedIn.html?userId=" + encodeURIComponent(loginId) + "&sessionJwt=" + resp.data.sessionJwt)
    }
  }
</script>

Update Password

Update a password for an existing logged in user using their refresh token.

// Args:
//    loginId (str): The login ID of the user who's information is being updated
const loginId = "email@company.com"
//    newPassword (str): The new password to use
const newPassword = "xxxxxx"
//    token (str): The session's refresh token (used for verification)
const token = "xxxxxx"

const descopeSdk = useDescope();
const resp = await descopeSdk.password.update(loginId, newPassword, token);
if (!resp.ok) {
  console.log("Failed to update password")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully updated password")
}

// Args:
//    loginId (str): The login ID of the user who's information is being updated
const loginId = "email@company.com"
//    newPassword (str): The new password to use
const newPassword = "xxxxxx"
//    token (str): The session's refresh token (used for verification)
const token = "xxxxxx"

const resp = await descopeSdk.password.update(loginId, newPassword, token);
if (!resp.ok) {
  console.log("Failed to update password")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully updated password")
}

<script>
  let descopeSdk = Descope({projectId: '__ProjectID__', persistTokens: true, autoRefresh: true });

  async function updatePassword() {
    // Args:
    //    loginId (str): The login ID of the user who's information is being updated
    const loginId = document.getElementById("loginId").value
    //    newPassword (str): The new password to use
    const newPassword = document.getElementById("newPassword").value
    //    token (str): The session's refresh token (used for verification)
    const token = document.getElementById("refreshToken").value

    const resp = await descopeSdk.password.update(loginId, newPassword, token);
    if (!resp.ok) {
      window.alert("Failed to update password\nStatus Code: " + resp.code
        + "\nError Code: " + resp.error.errorCode + "\nError Description: " + resp.error.errorDescription + "\nError Message: " + resp.error.errorMessage)
    }
    else {
      console.log("Successfully updated password")
      window.alert("Successfully updated password. After closing this alert, you will be directed to the login screen to login with your updated password")
      window.location.replace("./signInWithPassword")
    }
  }
</script>

Replace Password

Replace a password with a new one. The old password is used to authenticate the user before replacing the password. If the user cannot be authenticated, this operation will fail.

// Args:
//    loginId (str): The login ID of the user who's information is being replaced
const loginId = "email@company.com"
//    oldPassword (str): The user's current active password
const oldPassword = "xxxxxx"
//    newPassword (str): The new password to use
const newPassword = "xxxxxx"

const descopeSdk = useDescope();
const resp = await descopeSdk.password.replace(loginId, oldPassword, newPassword);
if (!resp.ok) {
  console.log("Failed to replace password")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully replaced password")
}

// Args:
//    loginId (str): The login ID of the user who's information is being replaced
const loginId = "email@company.com"
//    oldPassword (str): The user's current active password
const oldPassword = "xxxxxx"
//    newPassword (str): The new password to use
const newPassword = "xxxxxx"

const resp = await descopeSdk.password.replace(loginId, oldPassword, newPassword);
if (!resp.ok) {
  console.log("Failed to replace password")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully replaced password")
}

<script>
  let descopeSdk = Descope({projectId: '__ProjectID__', persistTokens: true, autoRefresh: true });

  async function replacePassword() {
    // Args:
    //    loginId (str): The login ID of the user who's information is being replaced
    const loginId = document.getElementById("loginId").value
    //    oldPassword (str): The user's current active password
    const oldPassword = document.getElementById("oldPassword").value
    //    newPassword (str): The new password to use
    const newPassword = document.getElementById("newPassword").value

    const resp = await descopeSdk.password.replace(loginId, oldPassword, newPassword);
    if (!resp.ok) {
      window.alert("Failed to replace password\nStatus Code: " + resp.code
        + "\nError Code: " + resp.error.errorCode + "\nError Description: " + resp.error.errorDescription + "\nError Message: " + resp.error.errorMessage)
    }
    else {
      console.log("Successfully replaced password")
      window.alert("Successfully replaced password. After closing this alert, you will be directed to the login screen to login with your updated password.")
      window.location.replace("./signInWithPassword")
    }
  }
</script>

Reset Password

Sends a password reset prompt to the user with the given login id according to the password settings defined in the Descope console. NOTE: The user's email must be verified in order for the password reset method to complete.

// Args:
//    loginId (str): The login ID of the user who's password is being reset
const loginId = "email@company.com"
//    redirectURL (str): Optional parameter that is used by Magic Link.
const redirectURL = "http://auth.company.com/api/verify_magiclink"
//    templateOptions (TemplateOptions): Password reset email template options
const templateOptions = {"option": "Value1"}

const descopeSdk = useDescope();
const resp = await descopeSdk.password.sendReset(loginId, redirectURL, templateOptions);
if (!resp.ok) {
  console.log("Failed to send password reset")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully sent password reset")
}

// Args:
//    loginId (str): The login ID of the user who's password is being reset
const loginId = "email@company.com"
//    redirectURL (str): Optional parameter that is used by Magic Link.
const redirectURL = "http://auth.company.com/api/verify_magiclink"
//    templateOptions (TemplateOptions): Password reset email template options
const templateOptions = {"option": "Value1"}

const resp = await descopeSdk.password.sendReset(loginId, redirectURL, templateOptions);
if (!resp.ok) {
  console.log("Failed to send password reset")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully sent password reset")
}

<script>
  let descopeSdk = Descope({projectId: '__ProjectID__', persistTokens: true, autoRefresh: true });

  async function updatePassword() {
    // Args:
    //    loginId (str): The login ID of the user who's information is being updated
    const loginId = userId
    //    newPassword (str): The new password to use
    const newPassword = document.getElementById("newPassword").value
    //    token (str): The session's refresh token (used for verification)
    const token = refreshToken
    //    templateOptions (TemplateOptions): Password reset email template options
    const templateOptions = {"option": "Value1"}

    const resp = await descopeSdk.password.sendReset(loginId, redirectURL, templateOptions);
    if (!resp.ok) {
      window.alert("Failed to send password reset\nStatus Code: " + resp.code
        + "\nError Code: " + resp.error.errorCode + "\nError Description: " + resp.error.errorDescription + "\nError Message: " + resp.error.errorMessage)
    }
    else {
      console.log("Successfully sent password reset")
      window.location.replace("./signInWithPassword")
    }
  }
</script>

Get Password Policy

Get the configured password policy for the project.

// Args:
//     None

const descopeSdk = useDescope();
const resp = await descopeSdk.password.policy();
if (!resp.ok) {
  console.log("Successfully returned password policy")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully sent password reset")
  console.log(resp)
}

// Args:
//     None

const resp = await descopeSdk.password.policy();
if (!resp.ok) {
  console.log("Successfully returned password policy")
  console.log("Status Code: " + resp.code)
  console.log("Error Code: " + resp.error.errorCode)
  console.log("Error Description: " + resp.error.errorDescription)
  console.log("Error Message: " + resp.error.errorMessage)
}
else {
  console.log("Successfully sent password reset")
  console.log(resp)
}

<script>
  let descopeSdk = Descope({projectId: '__ProjectID__', persistTokens: true, autoRefresh: true });

  getPasswordPolicy()

  async function getPasswordPolicy() {
    const resp = await descopeSdk.password.policy();
    if (!resp.ok) {
      window.alert("Failed to receive the project's password policy\nStatus Code: " + resp.code
        + "\nError Code: " + resp.error.errorCode + "\nError Description: " + resp.error.errorDescription + "\nError Message: " + resp.error.errorMessage)
    }
    else {
      console.log("Successfully received the project's password policy")
      console.log(resp.data)
      window.alert("This is your password policy:\n\n" + JSON.stringify(resp.data, null, 2))
    }
  }
</script>

Session Validation

The final step of completing the authentication with Descope is to validate the user session. Descope provides rich session management capabilities, including configurable session timeouts and logout functions. You can find the details and sample code for client session validation here.

Checkpoint

Your application is now integrated with Descope. Please test with sign-up or sign-in use case.

Need help?

Was this helpful?

Checkpoint

On this page