Connect your frontend

AWS Blocks generates a typed client from your backend so your frontend calls methods directly — there is no code to write for the transport. How you generate and authenticate the client depends on your platform.

Generate the client

After you deploy (so amplify_outputs.json exists), generate the client from your backend exports:

npm run blocks:generate-client

This writes aws-blocks/client.js. The generated client reads the Blocks API URL from amplify_outputs.json and registers a middleware that attaches your Amplify Cognito token to every request:

import { fetchAuthSession } from 'aws-amplify/auth';
import { registerMiddleware } from '@aws-blocks/blocks/client';
import outputs from '../amplify_outputs.json';

const BLOCKS_API_URL = outputs.custom?.blocks_api_url;

// Attach Cognito bearer token to every Blocks API call
registerMiddleware({
  async onRequest(req) {
    const session = await fetchAuthSession();
    const token = session.tokens?.idToken?.toString();
    if (token) req.headers['Authorization'] = `Bearer ${token}`;
    return req;
  }
});

Regenerate the client whenever you change your API surface in aws-blocks/index.ts.

Call the API

Import the typed api and call its methods. The middleware injects the token automatically, so signed-in users authenticate transparently:

import { api } from 'aws-blocks';

// Public method — no sign-in required
const { message } = await api.greet('world');

// Protected methods — use the signed-in Amplify user's token
await api.putNote('draft', 'Buy milk');
const { value } = await api.getNote('draft');

Make sure Amplify.configure(outputs) has run during app startup (as in any Amplify app) so fetchAuthSession() can return the current user's tokens.

Next steps

• Review how the integration works.
• See the AWS Blocks Developer Guide for the full client and API reference.