This guide will help you quickly integrate Morph into your React application.

​
Installation

yarn add @runmorph/atoms

​
Basic Setup

1

Add Morph Provider

Wrap your application with the Morph.Provider component:

import { Morph } from "@runmorph/atoms";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Morph.Provider>
          {children}
        </Morph.Provider>
      </body>
    </html>
  );
}
2

Configure environment variables

Add your Morph public key to your environment variables:

NEXT_PUBLIC_MORPH_PUBLIC_KEY=pk_...

The provider will automatically detect the key from your environment variables.

3

Add Connect button

Add the Connect component to handle authorization:

import { Connect } from "@runmorph/atoms";

export default function ConnectionPage({ sessionToken }) {
  return (
    <Connect
      sessionToken={sessionToken}
      connectionCallbacks={{
        onError: (error) => alert(error.message)
      }}
    />
  );
}

​
Next Steps