Most users don’t need this! If you’re using Framer, check out our simple one-script installation instead.
The Gately SDK is for developers who need programmatic access to authentication features. Most Framer users should use our simple embed script instead.

​
Installation

The Gately SDK can be installed and used in multiple ways. Choose the method that best fits your project setup.

​
Quick Start

Add the Gately SDK to your HTML page: 
<script src="https://cdn.usegately.com/gately.min.js"></script>
The SDK will be automatically available as window.gately and window.GatelyBrowserClient.

​
Method 2: ES Module Import

For modern JavaScript projects using ES modules: 
import { GatelyBrowserClient } from 'https://cdn.usegately.com/gately-sdk.esm.min.js'

​
Method 3: Versioned Import (Production)

For production applications that need version stability: 
import { GatelyBrowserClient } from 'https://cdn.usegately.com/sdk/v1.1.0/gately-sdk.esm.min.js'

​
Framework Integration

​
React

​
Script Tag Method

<script src="https://cdn.usegately.com/gately.min.js"></script>

import React from 'react'

function App() {
  const { user, login, logout, isAuthenticated } = window.gately.useGately('your-project-id')
  
  // Your React component logic
}

​
ES Module Method

import { useGately } from 'https://cdn.usegately.com/gately-sdk.esm.min.js'

function App() {
  const { user, login, logout, isAuthenticated } = useGately('your-project-id')
  
  // Your React component logic
}

​
Vue

import { useGately } from 'https://cdn.usegately.com/gately-sdk.esm.min.js'

export default {
  setup() {
    const { user, login, logout, isAuthenticated } = useGately('your-project-id')
    
    return {
      user,
      login,
      logout,
      isAuthenticated
    }
  }
}

​
Svelte

import { createGatelyStore } from 'https://cdn.usegately.com/gately-sdk.esm.min.js'

const gatelyStore = createGatelyStore('your-project-id')

​
Angular

import { GatelyService } from 'https://cdn.usegately.com/gately-sdk.esm.min.js'

@Injectable({
  providedIn: 'root'
})
export class GatelyService {
  // Service implementation
}

​
Node.js Usage

For server-side applications: 
import { GatelyNodeClient } from 'https://cdn.usegately.com/gately-sdk.esm.min.js'

const gately = new GatelyNodeClient('your-project-id')

​
CDN URLs

​
Latest Version

  • Script Tag: https://cdn.usegately.com/gately.min.js
  • ES Module: https://cdn.usegately.com/gately-sdk.esm.min.js
  • Script Tag: https://cdn.usegately.com/sdk/v1.1.0/gately.min.js
  • ES Module: https://cdn.usegately.com/sdk/v1.1.0/gately-sdk.esm.min.js

​
Development

  • Script Tag: https://dev-cdn.usegately.com/gately.min.js
  • ES Module: https://dev-cdn.usegately.com/gately-sdk.esm.min.js

​
Configuration

​
Basic Setup

const gately = new GatelyBrowserClient('your-project-id')

​
Advanced Configuration

const gately = new GatelyBrowserClient('your-project-id', {
  apiUrl: 'https://sdk.usegately.com', // Optional: custom API URL
  autoRefresh: true, // Optional: auto-refresh tokens (default: true)
})

​
Environment-Specific Configuration

// Development
const gately = new GatelyBrowserClient('your-project-id', {
  apiUrl: 'https://dev-sdk.usegately.com'
})

// Production
const gately = new GatelyBrowserClient('your-project-id', {
  apiUrl: 'https://sdk.usegately.com'
})

​
TypeScript Support

The SDK includes full TypeScript support. When using ES modules, you’ll get automatic type checking: 
import { GatelyBrowserClient, User, Session } from 'https://cdn.usegately.com/gately-sdk.esm.min.js'

const gately = new GatelyBrowserClient('your-project-id')

async function handleLogin(): Promise<{ user: User; session: Session }> {
  return await gately.login('user@example.com', 'password')
}

​
Browser Compatibility

The Gately SDK supports all modern browsers:
  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+
For older browsers, consider using a polyfill for ES modules or the script tag method.

​
Next Steps

After installation, check out: