Glide-Web-Client-SDK

A specialized web client SDK for secure frontend authentication URL validation, designed to work seamlessly with the Glide Backend SDK. Supports React, Vue, and Angular frameworks.

Features

• 🔒 Client-side authentication URL validation
• 🌐 Multiple authentication methods:
  • Invisible iframe integration
  • Popup window authentication
  • Redirect-based flow
• ⚛️ React hooks integration
• 💚 Vue 3 composition API support
• 🅰️ Angular service integration
• 🔧 Vanilla JavaScript/TypeScript support
• 📦 TypeScript support out of the box

Installation

npm install glide-web-client-sdk

Purpose

The Glide-Web-Client-SDK is designed to enhance security by providing client-side validation of authentication URLs received from the backend SDK. This additional layer of security ensures that authentication processes are verified on both server and client sides.

Authentication Methods

1. Invisible iframe

Performs authentication in a hidden iframe, providing a seamless user experience without visible UI changes.

const { authenticate } = useAuth('https://auth.example.com', {
  method: 'iframe',
  onComplete: (token) => {
    console.log('Authentication completed:', token);
  }
});

2. Popup Window

Opens a popup window for authentication, suitable for scenarios requiring user interaction.

const { authenticate } = useAuth('https://auth.example.com', {
  method: 'popup',
  onComplete: (token) => {
    console.log('Authentication completed:', token);
  }
});

3. Redirect

Redirects the user to the authentication page and returns to the application afterward.

const { authenticate } = useAuth('https://auth.example.com', {
  method: 'redirect',
  redirectUri: 'https://your-app.com/callback',
  onComplete: (token) => {
    console.log('Authentication completed:', token);
  }
});

Framework Integrations

Vue 3

import { useClient } from 'glide-web-client-sdk/vue';

// In your setup function
const { useAuth } = useClient();

const { token, loading, error, authenticate } = useAuth('https://auth.example.com', {
  method: 'popup', // or 'iframe' or 'redirect'
  onTokenReceived: (token) => {
    console.log('Token received:', token);
  }
});

// Example template usage
<template>
  <button @click="authenticate" :disabled="authLoading">
    {{ authLoading ? 'Authenticating...' : 'Login' }}
  </button>

  <div v-if="token">
    Authenticated with token: {{ token }}
  </div>

  <div v-if="authError">
    {{ authError.message }}
  </div>
</template>

React

import { useClient } from 'glide-web-client-sdk/react';

function MyComponent() {
  const { useAuth } = useClient();

  const { 
    token,
    loading,
    error,
    authenticate
  } = useAuth({
    authUrl: 'https://auth.example.com',
    method: 'popup' // or 'iframe' or 'redirect'
  });

  const handleLogin = async () => {
    try {
      await authenticate('https://auth.example.com', {
        method: 'popup', // or 'iframe' or 'redirect'
        onTokenReceived: (token) => {
          // Handle intermediate token updates
        },
        onComplete: (token) => {
          // Handle authentication completion
        }
      });
    } catch (err) {
      // Handle authentication error
    }
  };

  // Making API calls
  const { data, loading: queryLoading, error: queryError, refetch } = useQuery('/data');
}

Angular

import { ClientService } from 'glide-web-client-sdk/angular';

@Component({
  // ...
})
export class MyComponent {
  constructor(private clientService: ClientService) {
    this.clientService.authenticate({
      authUrl: 'https://auth.example.com',
      method: 'popup'
    });
  }
}

Configuration

Configure the SDK with authentication-specific options:

interface AuthConfig {
  method: 'iframe' | 'popup' | 'redirect';
  redirectUri?: string;
  popupOptions?: {
    width: number;
    height: number;
  };
  timeout?: number;
}

License

MIT

Contributing

Contributions are welcome! Please read our contributing guidelines for details.

Basic Usage

import { SDKClient } from 'glide-web-client-sdk';