Add Phone Authentication to Your React Application

This guide demonstrates how to integrate Magical Auth with React applications using our Web Client SDK.

1

Install Dependencies

Install the Glide Web Client SDK in your React project.

The SDK provides React hooks and components for seamless integration.

2

Create a Custom Hook

Create a custom React hook to manage the phone authentication client.

This hook will handle initialization and provide authentication methods.

3

Create Phone Auth Component

Build a React component that uses the custom hook for authentication.

This component provides UI for both verification methods.

4

Implement Verification

The verification method validates that the user owns the provided phone number.

It triggers the secure browser prompt and returns the verification status.

5

Implement Phone Retrieval

The get phone method automatically retrieves the user's phone number from their device.

No manual input is required - perfect for auto-filling forms.

6

Use in Your App

Import and use the PhoneAuthComponent in your React application.

Add environment variables and styling to complete the integration.

Terminal

npm install glide-web-client-sdk

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

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