Skip to main content

Add Phone Authentication to Your Angular Application

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

1

Install the SDK

Install the Glide Web Client SDK in your Angular project.

The SDK provides TypeScript support out of the box for type-safe development.

2

Create Authentication Service

Create an Angular service to manage phone authentication.

This service will:

  • Initialize the PhoneAuthClient
  • Provide authentication methods as Observables
  • Handle errors and state management
  • Integrate with Angular's dependency injection
3

Phone Verification Component

Create a component for phone number verification.

This component features:

  • Reactive forms with validation
  • Async pipe for state management
  • Material Design components
  • Error handling and feedback
4

Auto-Retrieve Component

Create a component that automatically retrieves the phone number.

This component demonstrates:

  • One-click phone retrieval
  • Integration with Angular forms
  • Progressive enhancement
5

Complete Angular Application

Here's a complete Angular application with Magical Auth integration.

This example includes:

  • Module configuration
  • Routing with guards
  • Material Design UI
  • State management
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