Supported Frameworks

Our Frontend SDK provides first-class support for modern JavaScript frameworks with built-in helpers, type safety, and framework-specific integrations.

SDK-Supported Frameworks

Angular

Full integration with Angular's dependency injection and reactive patterns.

npm install @23blocks/sdk

// app.config.ts
import { create23BlocksClient } from '@23blocks/sdk';

export const blocksClient = create23BlocksClient({
  urls: { authentication: 'https://auth.api.us.23blocks.com' },  // Use service-specific URLs
  appId: environment.appId,
  apiKey: environment.apiKey,
});

// auth.service.ts
import { Injectable } from '@angular/core';
import { blocksClient } from './app.config';

@Injectable({ providedIn: 'root' })
export class AuthService {
  async login(email: string, password: string) {
    return blocksClient.auth.login({ email, password });
  }

  async register(email: string, password: string) {
    return blocksClient.auth.register({ email, password });
  }

  async getCurrentUser() {
    return blocksClient.auth.me();
  }
}

Features:

• Works with standalone components
• Compatible with signals and RxJS
• SSR support with Angular Universal

---

React

Seamless integration with React hooks and state management.

npm install @23blocks/sdk

// blocks-client.ts
import { create23BlocksClient } from '@23blocks/sdk';

export const blocksClient = create23BlocksClient({
  urls: { authentication: 'https://auth.api.us.23blocks.com' },  // Use service-specific URLs
  appId: process.env.REACT_APP_APP_ID,
  apiKey: process.env.REACT_APP_API_KEY,
});

// useAuth.ts
import { useState, useEffect } from 'react';
import { blocksClient } from './blocks-client';

export function useAuth() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    blocksClient.auth.me()
      .then(setUser)
      .catch(() => setUser(null))
      .finally(() => setLoading(false));
  }, []);

  const login = async (email: string, password: string) => {
    const result = await blocksClient.auth.login({ email, password });
    setUser(result.user);
    return result;
  };

  return { user, loading, login };
}

Features:

• Works with React 18+ and hooks
• Compatible with Next.js (App Router and Pages Router)
• Supports React Server Components

---

React Native

Build mobile apps with the same SDK.

npm install @23blocks/sdk

// App.tsx
import { create23BlocksClient } from '@23blocks/sdk';
import AsyncStorage from '@react-native-async-storage/async-storage';

const blocksClient = create23BlocksClient({
  urls: { authentication: 'https://auth.api.us.23blocks.com' },  // Use service-specific URLs
  appId: 'your-app-id',
  apiKey: 'your-api-key',
  // Optional: Persist tokens
  storage: AsyncStorage,
});

// LoginScreen.tsx
import React, { useState } from 'react';
import { View, TextInput, Button, Alert } from 'react-native';

export function LoginScreen({ navigation }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    try {
      await blocksClient.auth.login({ email, password });
      navigation.navigate('Home');
    } catch (error) {
      Alert.alert('Error', 'Invalid credentials');
    }
  };

  return (
    <View>
      <TextInput value={email} onChangeText={setEmail} placeholder="Email" />
      <TextInput value={password} onChangeText={setPassword} secureTextEntry />
      <Button title="Login" onPress={handleLogin} />
    </View>
  );
}

Features:

• Works on iOS and Android
• Token persistence with AsyncStorage
• Expo compatible

---

Other Frameworks

Since 23blocks is a standard REST API, you can use it with any framework:

Framework	Integration
Vue.js	Use SDK or direct HTTP calls
Svelte	Use SDK or direct HTTP calls
Next.js	Full SDK support (client & server)
Nuxt.js	Direct HTTP calls
Remix	Direct HTTP calls
Astro	Direct HTTP calls
SolidJS	Direct HTTP calls

Example: Vue.js

// composables/useBlocks.js
import { create23BlocksClient } from '@23blocks/sdk';

const client = create23BlocksClient({
  urls: { authentication: 'https://auth.api.us.23blocks.com' },  // Use service-specific URLs
  appId: import.meta.env.VITE_APP_ID,
  apiKey: import.meta.env.VITE_API_KEY,
});

export function useBlocks() {
  return client;
}

Example: Svelte

<script>
  import { create23BlocksClient } from '@23blocks/sdk';

  const client = create23BlocksClient({
    urls: { authentication: 'https://auth.api.us.23blocks.com' },  // Use service-specific URLs
    appId: import.meta.env.VITE_APP_ID,
    apiKey: import.meta.env.VITE_API_KEY,
  });

  let user = null;

  async function login(email, password) {
    const result = await client.auth.login({ email, password });
    user = result.user;
  }
</script>

---

SDK Features

The 23blocks Frontend SDK provides:

Feature	Description
TypeScript Types	Full type safety for all API responses
Auto-completion	IDE support for all methods and parameters
Token Management	Automatic token storage and refresh
Error Handling	Typed error responses with helpful messages
Retry Logic	Automatic retry on network failures

---

Starter Templates

Skip the setup and start building immediately with our production-ready templates:

Template	Framework	Features	Get Started
Next.js	Next.js 15 + React 19	App Router, SSR, Tailwind	Use Template
Angular	Angular 19	Standalone components, RxJS	Use Template
Mobile	React Native (Expo 52)	iOS, Android, Expo Router	Use Template

Each template includes:

• Pre-built authentication flows (sign-in, sign-up, password reset)
• 23blocks SDK pre-configured
• Full TypeScript support
• Environment-based configuration

Learn more about templates →

---

Get Started

1. Use a starter template or install the SDK: npm install @23blocks/react
2. Read the Frontend SDK documentation
3. Browse the block documentation for API references