Connection.Triggers.Authorize

The Connection.Triggers.Authorize component handles the connection authorization flow. It provides:

Custom authorization UI integration
Popup and redirect authorization modes
Comprehensive callback system
Connection state management
Automatic popup window handling

Installation

yarn add @runmorph/atoms

Usage

"use client"
import { Connection } from "@runmorph/atoms";
import { Button } from "@/components/ui/button";

function CustomConnectButton({ sessionToken }) {
    return (
        <Connection.Triggers.Authorize sessionToken={sessionToken}>
            <Button>Connect Account</Button>
        </Connection.Triggers.Authorize>
    );
}

export default CustomConnectButton;

"use client"
import { Connection } from "@runmorph/atoms";
import { Button } from "@/components/ui/button";
import { toast } from "@/components/ui/use-toast";

function ConnectWithCallbacks({ sessionToken }) {
    return (
        <Connection.Triggers.Authorize
            sessionToken={sessionToken}
            connectionCallbacks={{
                onStart: () => toast({
                    title: "Connection Started",
                    description: "Initializing connection process..."
                }),
                authorized: (data) => toast({
                    title: "Authorization Successful",
                    description: "Your account has been connected."
                }),
                onConnectionDataChange: (data) => console.log("Connection updated:", data),
                onError: (error) => toast({
                    variant: "destructive",
                    title: "Connection Error",
                    description: error.message
                })
            }}
        >
            <Button variant="outline">
                <IconPlug className="mr-2 h-4 w-4" />
                Connect with Callbacks
            </Button>
        </Connection.Triggers.Authorize>
    );
}

export default ConnectWithCallbacks;

"use client"
import { Connection } from "@runmorph/atoms";
import { Button } from "@/components/ui/button";
import { IconExternalLink } from "@/components/ui/icons";

function RedirectConnectButton({ sessionToken }) {
    return (
        <Connection.Triggers.Authorize
            sessionToken={sessionToken}
            windowMode="redirect"
            redirectUrl="https://app.co/auth/callback"
        >
            <Button>
                Connect with Redirect
                <IconExternalLink className="ml-2 h-4 w-4" />
            </Button>
        </Connection.Triggers.Authorize>
    );
}

export default RedirectConnectButton;

Props

ReactElement

required

A valid React element that will trigger the authorization action. Must accept onClick and onKeyDown event handlers.

string

required

A session token for the connection. Can be provided via props or through a Connection.Provider context.

popup|redirect

default:"popup"

Determines how the authorization window is opened: - popup: Opens in a new window (default) - redirect: Redirects the current window

direct|connect

default:"connect"

The connection mode to use: - connect: Standard OAuth connection flow - direct: Direct connection without OAuth

string

The URL where the user will be redirected after authorization. Required when windowMode is set to redirect.

object

Additional settings to pass to the connection authorization flow.

object

Show properties

function

Callback fired when authorization is successful

function

Callback fired when connection data changes.

function

Callback fired when authorization process starts.

function

Callback fired when an error occurs.

When using windowMode="popup", the component:

Checks if popups are allowed
Centers the popup window on screen
Uses standard dimensions (600x800)
Monitors popup state
Handles connection status updates

Default popup configuration:

{
  width: 600,
  height: 800,
  centered: true,
  pollInterval: 1000 // ms
}

Internationalization

The component supports internationalization for error messages through:

triggers.authorize.errors.missingToken
triggers.authorize.errors.missingMethod
triggers.authorize.errors.popupBlocked
triggers.authorize.errors.noAuthUrl
triggers.authorize.errors.invalidChildren

Introduction

Components

Connection.Triggers.Authorize

Installation

Usage

Props

Internationalization

​Installation

​Usage

​Props

​Popup Window Behavior

​Internationalization

Installation

Usage

Props

Popup Window Behavior

Internationalization