Guides
Get Started

Quickstart

Suggest Edits

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:

npm install @moonpay/auth-sdk

Getting started

1. Import the MoonPay Authenticate SDK

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

2. Configure the SDK

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

const sdk = new MoonPayAuthSDK('your_publishable_key', {
  components: [LoginComponents.EmailOtp]
})

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:

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.

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

Learn more about partner tokens here: Partner Token API Reference

Next up:

Updated 7 months ago