Clerk OAuth2 Login

clerk-oauth-login.py

import requests

# OAuth app information
oauth_info = {
    "authorize_url": "https://clerk.your-domain.com/oauth/authorize",
    "callback_url": "https://oauth-client.com/oauth2/callback",
    "client_id": "d9g4CT4WYiCBm7EU",
    "client_secret": "VVgbT7i6sPo7sTljq2zj12fjmg0jPL5k",
    "scopes": "profile email",
    "token_fetch_url": "https://clerk.your-domain.com/oauth/token",
    "user_info_url": "https://clerk.your-domain.com/oauth/userinfo"
}

# Redirect user to the authorization URL
def get_authorization_url():
    params = {
        "client_id": oauth_info["client_id"],
        "redirect_uri": oauth_info["callback_url"],
        "response_type": "code",
        "scope": oauth_info["scopes"]
    }
    return oauth_info["authorize_url"] + "?" + "&".join([f"{key}={value}" for key, value in params.items()])

# Exchange authorization code for access token
def get_access_token(authorization_code):
    token_params = {
        "client_id": oauth_info["client_id"],
        "client_secret": oauth_info["client_secret"],
        "code": authorization_code,
        "grant_type": "authorization_code",
        "redirect_uri": oauth_info["callback_url"]
    }
    response = requests.post(oauth_info["token_fetch_url"], data=token_params)
    json_response = response.json()
    access_token = json_response.get("access_token")

    print()
    print("Logged in successfully 🎉")

    print('-' * 20)
    print("Authentication Token")
    print('-' * 20)
    print(f"Access Token: {json_response.get('access_token')}")
    print(f"Refresh Token: {json_response.get('refresh_token')}")
    print(f"Expires In (seconds): {json_response.get('expires_in')}")
    print(f"Token Type: {json_response.get('token_type')}")

    return access_token

# Use the access token to get user information
def get_user_info(access_token):
    headers = {
        "Authorization": f"Bearer {access_token}"
    }
    response = requests.get(oauth_info["user_info_url"], headers=headers)
    return response.json()

# Main execution
if __name__ == "__main__":
    # Step 1: Redirect user to the authorization URL
    authorization_url = get_authorization_url()
    print(f"Please visit the following URL and grant permission: {authorization_url}")

    # Step 2: After user grants permission, we'll get the authorization code through the callback URL
    authorization_code = input("Enter the authorization code from the callback URL: ")

    # Step 3: Exchange authorization code for an access token
    access_token = get_access_token(authorization_code)

    # Step 4: Use the access token to get user information
    user_info = get_user_info(access_token)
    print()
    print('-' * 20)
    print("User Information")
    print('-' * 20)
    print(f"ID: {user_info.get('user_id')}")
    print(f"Name: {user_info.get('name')}")
    print(f"Username: {user_info.get('username')}")
    print(f"Email: {user_info.get('email')}")

src-app-oauth2-callback-page.tsx

import { oauth2CodeSchema } from '@/app/api/settings'
import { OAuthCard } from '@/components/oauth-card'

export default function OAuth2Handler({
  searchParams
}: {
  searchParams: { [key: string]: string | string[] | undefined }
}) {
  // Retrieve the authorization code from the query parameters
  const { code } = oauth2CodeSchema.parse(searchParams)

  return <OAuthCard authorizationCode={code} />
}

src-components-oauth-card.tsx

'use client'

import { CopyToClipboard } from 'react-copy-to-clipboard'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle
} from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Button } from '@/components/ui/button'
import { useToast } from '@/components/ui/use-toast'

export function OAuthCard({
  authorizationCode
}: {
  authorizationCode: string
}) {
  const { toast } = useToast()

  return (
    <div className="mt-20 px-4 md:w-[500px] md:px-0 mx-auto">
      <Card>
        <CardHeader>
          <CardTitle>Authorization code</CardTitle>
          <CardDescription>
            Please use the authorization code below to complete the
            authentication process.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex space-x-2">
            <Input value={authorizationCode} readOnly />
            <CopyToClipboard
              text={authorizationCode}
              onCopy={() => {
                toast({
                  title: 'Code copied to clipboard 🎉',
                  description:
                    'You can now complete the authentication process in the terminal.'
                })
              }}
            >
              <Button variant="secondary" className="shrink-0">
                Copy Code
              </Button>
            </CopyToClipboard>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}