medusa-facebook-login-logic

A React hook library for handling Facebook OAuth authentication with Medusa.js backend.

Installation

Local Development (npm link)

# In the facebook-login-logic directory
npm link

# In your project directory
npm link medusa-facebook-login-logic

Production

npm install medusa-facebook-login-logic

Usage

Basic Login Button

import { useFacebookAuth } from 'medusa-facebook-login-logic'
import { sdk } from '@lib/config' // Your Medusa SDK instance

function FacebookLoginButton() {
  const { login, isLoading, error } = useFacebookAuth({ 
    sdk,
    productionDomain: 'yourdomain.com' // Optional
  })

  return (
    <button onClick={login} disabled={isLoading}>
      {isLoading ? 'Loading...' : 'Login with Facebook'}
    </button>
  )
}

Callback Handler

import { useFacebookAuth } from 'medusa-facebook-login-logic'
import { useSearchParams } from 'next/navigation'

function FacebookCallback() {
  const searchParams = useSearchParams()
  const queryParams = Object.fromEntries(searchParams.entries())

  const { customer, error, needsReLogin, isLoading } = useFacebookAuth({
    sdk,
    queryParams,
    onSuccess: (customer) => {
      console.log('Login successful:', customer)
      // Redirect to dashboard
    },
    onError: (error) => {
      console.error('Login failed:', error)
    },
    onNeedsReLogin: (email) => {
      console.log('Please login again with:', email)
    }
  })

  if (isLoading) return <div>Processing...</div>
  if (error) return <div>Error: {error}</div>
  if (needsReLogin) return <div>Please login again</div>
  
  return <div>Welcome {customer?.email}</div>
}

API

useFacebookAuth(props)

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | sdk | any | Yes | - | Medusa SDK instance | | baseUrl | string | No | Auto-detected | Base URL for redirects | | productionDomain | string | No | - | Production domain (e.g., 'example.com') | | callbackPath | string | No | /auth/customer/facebook/callback | OAuth callback path | | queryParams | Record<string, string> | No | - | OAuth callback query parameters | | onSuccess | (customer) => void | No | - | Success callback | | onError | (error: string) => void | No | - | Error callback | | onNeedsReLogin | (email: string) => void | No | - | Re-login required callback |

Returns

| Property | Type | Description | |----------|------|-------------| | login | () => Promise<void> | Initiates Facebook login flow | | isLoading | boolean | Loading state | | error | string \| null | Error message if any | | customer | any | Customer data after successful auth | | needsReLogin | boolean | Whether user needs to re-authenticate | | processCallback | () => Promise<void> | Manually process callback |

Environment Variables

The library automatically detects these environment variables:

• NEXT_PUBLIC_BASE_URL - Base URL for your application
• NEXT_PUBLIC_MEDUSA_STOREFRONT_URL - Medusa storefront URL

Features

• ✅ Automatic redirect URI handling
• ✅ Customer creation on first login
• ✅ Token refresh management
• ✅ Error handling with retry logic
• ✅ TypeScript support
• ✅ No hardcoded values

License

MIT