Zuplo
Authentication

Clerk Authentication Setup

Clerk is a modern authentication platform that provides beautiful, customizable UI components and a developer-friendly experience. This guide walks you through integrating Clerk authentication with your Dev Portal documentation site.

Prerequisites

If you don't have a Clerk account, you can sign up for a free Clerk account that provides 10,000 monthly active users.

Setup Steps

  1. Create a Clerk Application

    In the Clerk Dashboard:

    • Click Create Application
    • Enter your application name
    • Select your preferred authentication methods (email, social providers, etc.)
    • Click Create Application

  2. Configure Zudoku

    Get your publishable key from the Clerk dashboard:

    • Navigate to API Keys in your Clerk dashboard
    • Copy the Publishable key

    Add the Clerk configuration to your Dev Portal configuration file:

    Code
     
    // zudoku.config.ts
export default {
  // ... other configuration
  authentication: {
    type: "clerk",
    clerkPubKey: "<your-clerk-publishable-key>",
  },
  // ... other configuration
};

  3. Configure Redirect URLs (Optional)

    If you need custom redirect behavior, configure the allowed redirect URLs in Clerk:

    • Go to Paths in your Clerk dashboard
    • Add your production, preview, and local development URLs to the allowed redirect URLs
    • Common patterns:
      • Production: https://your-site.com/oauth/callback
      • Preview (wildcard): https://*.your-domain.com/oauth/callback
      • Local Development: http://localhost:3000/oauth/callback

Configuration Options

Basic Configuration

The minimal configuration requires only your Clerk publishable key:

Code
 
authentication: {
  type: "clerk",
  clerkPubKey: "pk_live_xxxxxxxxxxxxx"
}

Troubleshooting

Common Issues

  1. Invalid Publishable Key: Ensure you're using the publishable key (starts with pk_) and not the secret key.

  2. Authentication Not Working: Verify that your Clerk application is active and not in development mode when deploying to production.

  3. Redirect Issues: Check that your domain is added to the allowed redirect URLs in Clerk if using custom redirects.

Next Steps

Last modified on
Auth0Azure AD