Integration Guides

Learn how to integrate MyAppAPI with popular frameworks, platforms, and services. These guides provide step-by-step instructions and code examples to help you quickly add MyAppAPI functionality to your applications.

On this page

Frontend Frameworks

Integrate MyAppAPI into your frontend applications built with popular JavaScript frameworks.

React

React

Integrate MyAppAPI with React applications using our JavaScript SDK, custom hooks, and context providers.

View Integration Guide
Angular

Angular

Add MyAppAPI functionality to Angular applications with services, interceptors, and NgRx state management.

View Integration Guide
Vue.js

Vue.js

Integrate MyAppAPI with Vue.js applications using our JavaScript SDK, Vue plugins, and composition API.

View Integration Guide
Next.js

Next.js

Implement MyAppAPI in Next.js applications with server-side rendering, API routes, and Edge middleware.

View Integration Guide

React Integration

This guide shows you how to integrate MyAppAPI with React applications using our JavaScript SDK.

Installation

npm install @myappapi/sdk

Creating a Context Provider

Create a context provider to make MyAppAPI available throughout your application:

// src/contexts/ApiContext.js
import React, { createContext, useContext, useState, useEffect } from 'react';
import { MyAppAPI } from '@myappapi/sdk';

// Create context
const ApiContext = createContext(null);

// Config options for the SDK
const apiConfig = {
  apiKey: process.env.REACT_APP_MYAPPAPI_KEY,
  environment: process.env.NODE_ENV === 'production' ? 'production' : 'sandbox'
};

// Provider component
export const ApiProvider = ({ children }) => {
  const [api, setApi] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    // Initialize the API client
    try {
      const apiClient = new MyAppAPI(apiConfig);
      setApi(apiClient);
      setLoading(false);
    } catch (err) {
      setError(err);
      setLoading(false);
    }
  }, []);
  
  return (
    
      {children}
    
  );
};

// Custom hook to use the API context
export const useApi = () => {
  const context = useContext(ApiContext);
  if (context === null) {
    throw new Error('useApi must be used within an ApiProvider');
  }
  return context;
};

Setting Up the Provider

Wrap your application with the API provider:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ApiProvider } from './contexts/ApiContext';

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

Using the API in Components

Use the API client in your components:

// src/components/ResourceList.js
import React, { useState, useEffect } from 'react';
import { useApi } from '../contexts/ApiContext';

function ResourceList() {
  const { api, loading, error: apiError } = useApi();
  const [resources, setResources] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    // Skip if API is not initialized yet
    if (loading || apiError || !api) return;
    
    async function fetchResources() {
      try {
        const result = await api.resources.list();
        setResources(result.data);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    }
    
    fetchResources();
  }, [api, loading, apiError]);
  
  if (apiError) return 
Error initializing API: {apiError.message}
;
  if (loading) return 
Loading...
;
  if (error) return 
Error: {error}
;
  
  return (
    

      
Resources

      {resources.length === 0 ? (
        
No resources found

      ) : (
        
    
          {resources.map(resource => (
            
  • 
              
    {resource.name}
    
              
    {resource.description}
    
            
    • 
          ))}
        

      )}
    

  );
}

Authentication with React

Implement authentication in your React application:

// src/contexts/AuthContext.js
import React, { createContext, useContext, useState, useEffect } from 'react';
import { useApi } from './ApiContext';

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const { api } = useApi();
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  // Check for existing auth on mount
  useEffect(() => {
    if (!api) return;
    
    const token = localStorage.getItem('auth_token');
    if (token) {
      // Set the token in the API client
      api.setAuthToken(token);
      
      // Fetch the user profile
      fetchUserProfile();
    } else {
      setLoading(false);
    }
  }, [api]);
  
  // Fetch user profile
  const fetchUserProfile = async () => {
    try {
      const userData = await api.users.me();
      setUser(userData);
      setLoading(false);
    } catch (err) {
      setError(err);
      // Clear invalid token
      localStorage.removeItem('auth_token');
      api.clearAuthToken();
      setLoading(false);
    }
  };
  
  // Login function
  const login = async (email, password) => {
    try {
      const response = await api.auth.login({ email, password });
      localStorage.setItem('auth_token', response.token);
      api.setAuthToken(response.token);
      await fetchUserProfile();
      return true;
    } catch (err) {
      setError(err);
      return false;
    }
  };
  
  // Logout function
  const logout = () => {
    localStorage.removeItem('auth_token');
    api.clearAuthToken();
    setUser(null);
  };
  
  return (
    
      {children}
    
  );
};

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (context === null) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};

Complete Integration Example

For a complete example of a React application integrated with MyAppAPI, check out our React example repository.

Angular Integration

This guide shows you how to integrate MyAppAPI with Angular applications.

Installation

npm install @myappapi/sdk

Creating an API Service

Create an Angular service to wrap the API client:

// src/app/services/api.service.ts
import { Injectable } from '@angular/core';
import { MyAppAPI } from '@myappapi/sdk';
import { environment } from '../../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class ApiService {
  private api: MyAppAPI;
  
  constructor() {
    this.api = new MyAppAPI({
      apiKey: environment.myappApiKey,
      environment: environment.production ? 'production' : 'sandbox'
    });
  }
  
  // Resources API
  getResources() {
    return this.api.resources.list();
  }
  
  getResource(id: string) {
    return this.api.resources.get(id);
  }
  
  createResource(data: any) {
    return this.api.resources.create(data);
  }
  
  updateResource(id: string, data: any) {
    return this.api.resources.update(id, data);
  }
  
  deleteResource(id: string) {
    return this.api.resources.delete(id);
  }
  
  // Auth methods
  setAuthToken(token: string) {
    this.api.setAuthToken(token);
  }
  
  clearAuthToken() {
    this.api.clearAuthToken();
  }
  
  // Add more methods as needed for other API endpoints
}

Creating an Auth Service

Implement authentication in your Angular application:

// src/app/services/auth.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, from, throwError } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';
import { ApiService } from './api.service';

interface User {
  id: string;
  name: string;
  email: string;
  // Add more user properties as needed
}

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private currentUserSubject = new BehaviorSubject(null);
  public currentUser$ = this.currentUserSubject.asObservable();
  
  constructor(private apiService: ApiService) {
    this.loadStoredAuth();
  }
  
  private loadStoredAuth() {
    const token = localStorage.getItem('auth_token');
    if (token) {
      this.apiService.setAuthToken(token);
      this.fetchCurrentUser().subscribe();
    }
  }
  
  login(email: string, password: string): Observable {
    return from(this.apiService.api.auth.login({ email, password })).pipe(
      tap(response => {
        localStorage.setItem('auth_token', response.token);
        this.apiService.setAuthToken(response.token);
      }),
      catchError(error => {
        return throwError(() => error);
      })
    );
  }
  
  logout() {
    localStorage.removeItem('auth_token');
    this.apiService.clearAuthToken();
    this.currentUserSubject.next(null);
  }
  
  fetchCurrentUser(): Observable {
    return from(this.apiService.api.users.me()).pipe(
      tap(user => {
        this.currentUserSubject.next(user);
      }),
      catchError(error => {
        localStorage.removeItem('auth_token');
        this.apiService.clearAuthToken();
        return throwError(() => error);
      })
    );
  }
  
  get isLoggedIn(): boolean {
    return !!this.currentUserSubject.value;
  }
  
  get currentUser(): User | null {
    return this.currentUserSubject.value;
  }
}

Creating an Auth Interceptor

Create an HTTP interceptor to handle authentication errors:

// src/app/interceptors/auth.interceptor.ts
import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { Router } from '@angular/router';
import { AuthService } from '../services/auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService, private router: Router) {}
  
  intercept(request: HttpRequest, next: HttpHandler): Observable> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          // Token is invalid or expired
          this.authService.logout();
          this.router.navigate(['/login']);
        }
        return throwError(() => error);
      })
    );
  }
}

Using the API in Components

Use the API service in your components:

// src/app/components/resource-list/resource-list.component.ts
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api.service';

@Component({
  selector: 'app-resource-list',
  templateUrl: './resource-list.component.html',
  styleUrls: ['./resource-list.component.scss']
})
export class ResourceListComponent implements OnInit {
  resources: any[] = [];
  loading = true;
  error = null;
  
  constructor(private apiService: ApiService) {}
  
  ngOnInit() {
    this.loadResources();
  }
  
  async loadResources() {
    try {
      const result = await this.apiService.getResources();
      this.resources = result.data;
      this.loading = false;
    } catch (err) {
      this.error = err.message;
      this.loading = false;
    }
  }
}

For a complete example of an Angular application integrated with MyAppAPI, check out our Angular example repository.

Vue.js Integration

This guide shows you how to integrate MyAppAPI with Vue.js applications.

Installation

npm install @myappapi/sdk

Creating a Vue Plugin

Create a Vue plugin to make the API client available throughout your application:

// src/plugins/api.js
import { MyAppAPI } from '@myappapi/sdk';

export default {
  install(app, options) {
    // Create API instance
    const api = new MyAppAPI({
      apiKey: options.apiKey,
      environment: options.environment || 'production'
    });
    
    // Make it available throughout the app
    app.config.globalProperties.$api = api;
    
    // Also provide it through the provide/inject API
    app.provide('api', api);
  }
};

Installing the Plugin

Install the plugin in your Vue application:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import ApiPlugin from './plugins/api';

const app = createApp(App);

app.use(ApiPlugin, {
  apiKey: import.meta.env.VITE_MYAPPAPI_KEY,
  environment: import.meta.env.MODE === 'production' ? 'production' : 'sandbox'
});

app.mount('#app');

Using the API in Options API

Use the API client in components with the Options API:

Using the API in Composition API

Use the API client in components with the Composition API:

Creating an Auth Store with Pinia

Implement authentication with Pinia state management:

// src/stores/auth.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
import { useApi } from '../composables/api';

export const useAuthStore = defineStore('auth', () => {
  const api = useApi();
  
  // State
  const user = ref(null);
  const loading = ref(true);
  const error = ref(null);
  
  // Getters
  const isLoggedIn = computed(() => !!user.value);
  
  // Actions
  async function initialize() {
    const token = localStorage.getItem('auth_token');
    if (token) {
      api.setAuthToken(token);
      await fetchUserProfile();
    } else {
      loading.value = false;
    }
  }
  
  async function fetchUserProfile() {
    loading.value = true;
    error.value = null;
    
    try {
      const userData = await api.users.me();
      user.value = userData;
    } catch (err) {
      error.value = err;
      localStorage.removeItem('auth_token');
      api.clearAuthToken();
    } finally {
      loading.value = false;
    }
  }
  
  async function login(email, password) {
    loading.value = true;
    error.value = null;
    
    try {
      const response = await api.auth.login({ email, password });
      localStorage.setItem('auth_token', response.token);
      api.setAuthToken(response.token);
      await fetchUserProfile();
      return true;
    } catch (err) {
      error.value = err;
      return false;
    } finally {
      loading.value = false;
    }
  }
  
  function logout() {
    localStorage.removeItem('auth_token');
    api.clearAuthToken();
    user.value = null;
  }
  
  // Initialize on store creation
  initialize();
  
  return {
    user,
    loading,
    error,
    isLoggedIn,
    login,
    logout,
    fetchUserProfile
  };
});

For a complete example of a Vue.js application integrated with MyAppAPI, check out our Vue example repository.

Backend Frameworks

Integrate MyAppAPI into your backend applications built with various server-side frameworks.

Node.js

Node.js / Express

Integrate MyAppAPI with Express.js applications using our Node.js SDK, middleware, and routing.

View Integration Guide
Django

Django

Add MyAppAPI functionality to Django applications with our Python SDK, middleware, and Django REST Framework.

View Integration Guide
Ruby on Rails

Ruby on Rails

Integrate MyAppAPI with Rails applications using our Ruby SDK, concerns, and ActionController.

View Integration Guide
Laravel

Laravel

Implement MyAppAPI in Laravel applications with our PHP SDK, service providers, and facades.

View Integration Guide

Express.js Integration

This guide shows you how to integrate MyAppAPI with Express.js applications.

Installation

npm install @myappapi/sdk express dotenv

Setting Up the API Client

Create a module to initialize and export the API client:

// src/services/api.js
const { MyAppAPI } = require('@myappapi/sdk');
require('dotenv').config();

const api = new MyAppAPI({
  apiKey: process.env.MYAPPAPI_KEY,
  environment: process.env.NODE_ENV === 'production' ? 'production' : 'sandbox'
});

module.exports = api;

Creating API Routes

Create Express routes that use the MyAppAPI client:

// src/routes/resources.js
const express = require('express');
const router = express.Router();
const api = require('../services/api');

// List all resources
router.get('/', async (req, res, next) => {
  try {
    const { limit = 10, offset = 0 } = req.query;
    const result = await api.resources.list({ limit, offset });
    res.json(result);
  } catch (error) {
    next(error);
  }
});

// Get a single resource
router.get('/:id', async (req, res, next) => {
  try {
    const { id } = req.params;
    const resource = await api.resources.get(id);
    res.json(resource);
  } catch (error) {
    next(error);
  }
});

// Create a new resource
router.post('/', async (req, res, next) => {
  try {
    const resource = await api.resources.create(req.body);
    res.status(201).json(resource);
  } catch (error) {
    next(error);
  }
});

// Update a resource
router.put('/:id', async (req, res, next) => {
  try {
    const { id } = req.params;
    const resource = await api.resources.update(id, req.body);
    res.json(resource);
  } catch (error) {
    next(error);
  }
});

// Delete a resource
router.delete('/:id', async (req, res, next) => {
  try {
    const { id } = req.params;
    await api.resources.delete(id);
    res.status(204).end();
  } catch (error) {
    next(error);
  }
});

module.exports = router;

Setting Up the Express App

Create your Express application and use the API routes:

// src/app.js
const express = require('express');
const bodyParser = require('body-parser');
const resourceRoutes = require('./routes/resources');

const app = express();

// Middleware
app.use(bodyParser.json());

// Routes
app.use('/api/resources', resourceRoutes);

// Error handling middleware
app.use((err, req, res, next) => {
  console.error(err);
  
  if (err.isAxiosError) {
    // Handle API errors
    const status = err.response?.status || 500;
    const message = err.response?.data?.error?.message || 'An error occurred';
    
    return res.status(status).json({
      error: {
        message,
        details: err.response?.data?.error?.details
      }
    });
  }
  
  // Handle other errors
  res.status(500).json({
    error: {
      message: 'Internal Server Error'
    }
  });
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

module.exports = app;

Authentication Middleware

Create middleware to handle JWT authentication:

// src/middleware/auth.js
const jwt = require('jsonwebtoken');
const api = require('../services/api');

// Middleware to verify JWT token
const authenticateJWT = (req, res, next) => {
  const authHeader = req.headers.authorization;
  
  if (!authHeader) {
    return res.status(401).json({ error: { message: 'Authorization header missing' } });
  }
  
  const token = authHeader.split(' ')[1]; // Bearer TOKEN
  
  try {
    // Verify token
    const decoded = jwt.verify(token, process.env.JWT_SECRET);
    req.user = decoded; // Add user data to request
    
    // Set auth token for API requests
    api.setAuthToken(token);
    
    next();
  } catch (error) {
    return res.status(401).json({ error: { message: 'Invalid or expired token' } });
  }
};

module.exports = { authenticateJWT };

Protecting Routes

Use the authentication middleware to protect routes:

// src/routes/protected.js
const express = require('express');
const router = express.Router();
const { authenticateJWT } = require('../middleware/auth');
const api = require('../services/api');

// Apply authentication middleware to all routes in this router
router.use(authenticateJWT);

// Get the current user's profile
router.get('/profile', async (req, res, next) => {
  try {
    const user = await api.users.me();
    res.json(user);
  } catch (error) {
    next(error);
  }
});

// Get the current user's resources
router.get('/resources', async (req, res, next) => {
  try {
    const result = await api.resources.list({ user_id: req.user.sub });
    res.json(result);
  } catch (error) {
    next(error);
  }
});

module.exports = router;

For a complete example of an Express.js application integrated with MyAppAPI, check out our Express example repository.

Mobile Platforms

Integrate MyAppAPI into your mobile applications for iOS and Android.

iOS

iOS / Swift

Integrate MyAppAPI with iOS applications using our Swift SDK, Swift Concurrency, and Combine.

View Integration Guide
Android

Android / Kotlin

Add MyAppAPI functionality to Android applications with our Kotlin SDK, Coroutines, and Android Jetpack.

View Integration Guide
Flutter

Flutter

Integrate MyAppAPI with Flutter applications using our community-maintained Flutter package.

View Integration Guide
React Native

React Native

Implement MyAppAPI in React Native applications with our JavaScript SDK and React Native utilities.

View Integration Guide

CMS Platforms

Integrate MyAppAPI with popular content management systems.

WordPress

WordPress

Add MyAppAPI functionality to WordPress sites with our WordPress plugin.

View Integration Guide
Shopify

Shopify

Integrate MyAppAPI with Shopify stores using our Shopify app.

View Integration Guide
Drupal

Drupal

Add MyAppAPI functionality to Drupal sites with our Drupal module.

View Integration Guide
Webflow

Webflow

Implement MyAppAPI in Webflow sites with our custom code integration.

View Integration Guide

Cloud Platforms

Deploy MyAppAPI integrations on major cloud platforms.

AWS

AWS

Deploy MyAppAPI integrations on AWS using Lambda, API Gateway, and other services.

View Integration Guide
Azure

Azure

Integrate MyAppAPI with Azure using Functions, App Service, and other Azure services.

View Integration Guide
Google Cloud

Google Cloud

Deploy MyAppAPI integrations on Google Cloud using Cloud Functions, App Engine, and other GCP services.

View Integration Guide
Vercel

Vercel

Integrate MyAppAPI with Vercel using Serverless Functions and Edge Middleware.

View Integration Guide

CI/CD Integration

Integrate MyAppAPI into your CI/CD pipelines for automated testing and deployment.

GitHub Actions

GitHub Actions

Automate MyAppAPI testing and deployment using GitHub Actions workflows.

View Integration Guide
Jenkins

Jenkins

Integrate MyAppAPI with Jenkins pipelines for continuous integration and deployment.

View Integration Guide
GitLab CI

GitLab CI

Automate MyAppAPI testing and deployment using GitLab CI/CD pipelines.

View Integration Guide
CircleCI

CircleCI

Integrate MyAppAPI with CircleCI for continuous integration and deployment.

View Integration Guide

Other Services

Integrate MyAppAPI with other popular services and platforms.

Slack

Slack

Integrate MyAppAPI with Slack for notifications, bots, and interactive commands.

View Integration Guide
Stripe

Stripe

Combine MyAppAPI with Stripe for payment processing and subscription management.

View Integration Guide
Zapier

Zapier

Connect MyAppAPI with hundreds of other services using Zapier integrations.

View Integration Guide
Salesforce

Salesforce

Integrate MyAppAPI with Salesforce for CRM and customer data management.

View Integration Guide

Need Help with Integration?

Our team is available to assist with custom integrations and answer any questions you may have.

Contact Support View FAQ
← API Versioning Security Best Practices →