Skip to main content

Add Phone Authentication to Your JavaScript Application

This guide demonstrates how to integrate Magical Auth with any JavaScript application using our Web Client SDK.

1

Install the SDK

First, install the Glide Web Client SDK using npm, yarn, or include it via CDN.

The SDK provides the PhoneAuthClient class that handles all authentication operations.

2

Setup Your Project

Create your HTML file with the authentication UI.

This includes buttons for both verification flows and areas to display results.

3

Initialize the Client

Import the SDK and create a new instance of PhoneAuthClient with your API key.

You'll need to get your API key from the Glide dashboard.

4

Implement Phone Verification

The verifyPhoneNumberComplete() method verifies that the user owns a specific phone number.

This is the most common use case - proving ownership of a phone number.

  • Pass the phone number in E.164 format
  • Include consent information for user privacy
  • Handle the verification result
5

Retrieve Phone Number

The getPhoneNumberComplete() method retrieves the user's phone number from their device.

Use this when you want to auto-fill forms without requiring manual input.

  • No phone number input required
  • Automatically detects from the SIM card
  • Returns the number in E.164 format
6

Attach Event Listeners

Finally, connect your buttons to the authentication functions.

The event listeners will trigger the appropriate flow when users click the buttons.

Terminal
npm install glide-web-client-sdk

# Or using yarn
yarn add glide-web-client-sdk

# Or via CDN
<script src="https://unpkg.com/glide-web-client-sdk/dist/glide.min.js"></script>