Bedrock passport integration example

• Bedrock passport integration example
  • How to Install
  • How to integrate
    • Provider Props
    • Login Panel Props
  • Feature Options
  • Hooks and Methods - example of using the user hook, check if user is logged in

A React library for integrating authentication and wallet connection functionality into your web application with support for both traditional authentication methods and Web3 wallet connections.

How to Install

npm i @bedrock_org/passport

How to integrate

1. Set up your provider

import { BedrockPassportProvider } from "@bedrock_org/passport";

const App = () => {
  return (
    <BedrockPassportProvider baseUrl="..." authCallbackUrl="..." tenantId="...">
      {/* Your app */}
    </BedrockPassportProvider>
  );
};

Provider Props

| Prop | Type | Required | Default | Description | | ----------------- | ------ | -------- | --------------------------- | ---------------------------------------------- | | authCallbackUrl | string | Yes | - | URL to redirect after authentication | | baseUrl | string | Yes | - | Base URL for the Bedrock Passport API | | tenantId | string | No | - | Your tenant ID | | walletConnectId | string | No | "xxxxxxxxx" | WalletConnect project ID | | appName | string | No | "Bedrock Passport" | Application name for wallet connections | | appDescription | string | No | - | Application description for wallet connections | | appUrl | string | No | - | Application URL for wallet connections | | appIcon | string | No | - | Application icon URL for wallet connections | | subscriptionKey | string | No | "DEMO_BEDROCK_PASSPORT_KEY" | API subscription key |

2. Create an auth callback handler

import { useEffect } from "react";
import { useBedrockPassport } from "@bedrock_org/passport";

function AuthCallback() {
  const { loginCallback } = useBedrockPassport();

  useEffect(() => {
    const handleAuth = async () => {
      const params = new URLSearchParams(window.location.search);
      const token = params.get("token");
      const refreshToken = params.get("refreshToken");

      if (token && refreshToken) {
        const success = await loginCallback(token, refreshToken);
        if (success) {
          window.location.href = "/"; // Redirect after successful login
        }
      }
    };

    handleAuth();
  }, [loginCallback]);

  return <div>Authenticating...</div>;
}

3. Add the login panel to your app

import { useBedrockPassport, LoginPanel, Button } from "@bedrock_org/passport";
import "@bedrock_org/passport/dist/style.css";

...
<LoginPanel
        panelClass="..."
        buttonClass="..."
        logo="..."
        title=""
        logoAlt=""
        logoClass=""
        ...
/>

Login Panel Props

| Property | Type | Description | | --------------------------------- | --------------- | --------------------------------------------------------- | | Main Settings | | | | title | string | Optional string for the login panel title | | logo | string | Optional string for the logo URL | | logoAlt | string | Optional string for the logo alt text | | walletButtonText | string | Optional string for wallet connection button text | | separatorText | string | Optional string for the separator text (defaults to "or") | | authTitle | string | Optional string for the authentication section title | | Features | | | | features | FeatureConfig | Optional object to control enabled features | | Panel Styling | | | | panelClass | string | Optional string for overall panel CSS classes | | Header Section Styling | | | | headerClass | string | Optional string for header container CSS classes | | titleClass | string | Optional string for title text CSS classes | | logoClass | string | Optional string for logo image CSS classes | | Button Styling | | | | buttonClass | string | Optional string for general button CSS classes | | Separator Styling | | | | separatorClass | string | Optional string for separator line CSS classes | | separatorTextClass | string | Optional string for separator text CSS classes | | Authentication Method Styling | | | | authTitleClass | string | Optional string for authentication title CSS classes | | Provider Buttons Styling | | | | googleButtonClass | string | Optional string for Google button CSS classes | | appleButtonClass | string | Optional string for Apple button CSS classes | | emailButtonClass | string | Optional string for Email button CSS classes | | walletButtonClass | string | Optional string for wallet connection button CSS classes | | Form Elements Styling | | | | formClass | string | Optional string for form container CSS classes | | inputClass | string | Optional string for input field CSS classes | | errorClass | string | Optional string for error message CSS classes | | successClass | string | Optional string for success message CSS classes | | User Info Display Styling | | | | profileButtonClass | string | Optional string for profile button CSS classes | | logoutButtonClass | string | Optional string for logout button CSS classes | | linkRowClass | string | Optional string for link row container CSS classes | | walletRowClass | string | Optional string for wallet connection row CSS classes |

The library uses Tailwind CSS for styling. You can customize the appearance of components by passing appropriate class names to the component props.

Feature Options

| Property | Type | Default | Description | | ----------------------- | --------- | ------- | ---------------------------------------------- | | enableWalletConnect | boolean | true | Enable/disable wallet connection functionality | | enableEmailLogin | boolean | true | Enable/disable email-based authentication | | enableGoogleLogin | boolean | true | Enable/disable Google social login | | enableAppleLogin | boolean | true | Enable/disable Apple social login | | enableCurrencyDisplay | boolean | false | Enable/disable currency panel display | | showProfileButton | boolean | false | Control visibility of the profile button | | showLogoutButton | boolean | true | Control visibility of the logout button |

Hooks and Methods

const { user, isLoggedIn, signOut, loginCallback } = useBedrockPassport();

Example Integration

The library is still in development, more features will be added in the future.

example of using the user hook, check if user is logged in

const { isLoggedIn } = useBedrockPassport();