Quick Start - Morph

Try a live demo ✨

Live Demo
Select a connector below to experience our seamless authentication flow and see how easy it is to connect third-party services.

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

Installation

yarn add @runmorph/atoms

Basic Setup

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>
  );
}

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

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Morph.Provider>
      <App />
    </Morph.Provider>
  </React.StrictMode>
);

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

function App() {
  return (
    <Morph.Provider>
      <YourComponents />
    </Morph.Provider>
  );
}

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

export default function App() {
  return (
    <html>
      <body>
        <Morph.Provider>
          <Outlet />
        </Morph.Provider>
      </body>
    </html>
  );
}

Configure environment variables

Add your Morph public key to your environment variables:

NEXT_PUBLIC_MORPH_PUBLIC_KEY=pk_...

VITE_MORPH_PUBLIC_KEY=pk_...

REACT_APP_MORPH_PUBLIC_KEY=pk_...

MORPH_PUBLIC_KEY=pk_...

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

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)
      }}
    />
  );
}

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

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

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

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

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

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

Next Steps

Implement custom authorization flows using triggers
Add connection settings for advanced configuration
Add internationalization support
Explore security best practices for production deployments

​Installation

​Basic Setup

​Next Steps

Installation

Basic Setup

Next Steps