@onbeam/react

You need to provide a JWT token to consume the API. You will be able to obtain this user-specific JWT token after your user has logged in on your application.

Depending on your preferred storage solution, you will need to either pass a token prop to the provider on the initial render, or use the setToken handler returned from the useBeam() hook.

Option 1: Providing the token manually (initial render)

'use client';

import { Game } from '../components/Game';
import { BeamConfig } from 'mc-account-api-react';

export default function App() {
  return (
    <BeamConfig token="">
      <Game />
    </BeamConfig>
  );
}

Option 2: Setting the token manually

'use client';

import { Game } from '../components/Game';
import { BeamConfig } from 'mc-account-api-react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function App() {
  const { setToken } = useBeam();
  
  async function handleSetToken() {
    const userToken = await AsyncStorage.getItem("your_token_key");
    setToken(userToken)
  }

  return (
    <button onClick={handleSetToken}>Set the token manually</button>
  );
}

Once you completed either step 1 or 2, you'll be authorized to use the provided hooks as follows.

import { useEditProfile } from 'mc-account-api-react';

export const YourComponent = () => {
  const { mutate } = useEditProfile();

  return (
    <button
      onClick={() => mutate({
        data: {
          // Add your payload here
        }
      })}
    type="button"
    >
      Chagne your profile
    </button>
  )
}