Quickstart

The MoonPay Authenticate SDK allows developers to easily integrate MoonPay's authentication capabilities into websites. This guide will walk you through the process of setting up and using the MoonPay Authenticate SDK to enable user authentication via MoonPay services.

📘Prerequisites

Before you begin, make sure you have a MoonPay Publishable Key. You can obtain this key from your MoonPay Dashboard.

Installation

To get started, you need to install the MoonPay Authenticate SDK package. You can do this using npm:

Shell

npm install @moonpay/auth-sdk

Getting started

1. Import the MoonPay Authenticate SDK

TypeScript

import { MoonPayAuthSDK } from '@moonpay/auth-sdk';

2. Configure the SDK

Initialize and configure the MoonPay Authenticate SDK with your MoonPay Publishable Key:

TypeScript

const sdk = new MoonPayAuthSDK('pk_test_123')

3. Implement login and logout

You can now use the SDK methods to manage user authentication. Here's a simple example of how to handle login and logout:

TypeScript

import { useState, useEffect } from 'react'; 

// State to track user login status
const [isLoggedIn, setIsLoggedIn] = useState(false);

// Handle user login
const handleLogin = async () => {
  const loginResult = await sdk.login.show();

  if (loginResult !== null) {
    if (loginResult.success) {
      setIsLoggedIn(true);
    }
  }
}

useEffect(() => {
  const loadSdk = async () => {
    await sdk.init();
    const isLoggedIn = await sdk.isLoggedIn()
    setIsLoggedIn(isLoggedIn)
  }

  loadSdk();
}, [isLoggedIn])

// Handle user logout
const handleLogout = () => {
  setIsLoggedIn(false);
  sdk.logout();
}

4. Access user info

After a user logs in, you can access their personal information, such as their name and email, contained within the partner token.

TypeScript

const { customer } = loginResult.partner // Partner token
console.log(`Hello ${customer.email}`)

Learn more about partner tokens here: Partner Token API Reference

Next up:

PreviousOverviewNextHow to

Last updated