Skip to main content

OAuth2 Client Configuration

When you register an OAuth2 client with Quran.Foundation, you can configure metadata that appears on the login and consent pages. This guide explains each field and how it affects the user experience.

Client Metadata Fields​

FieldPurpose
client_nameYour app's name shown on login/consent pages
logo_uriURL to your app's logo (displayed on consent page)
client_uriYour app's website (clickable from logo)
policy_uriLink to your privacy policy
tos_uriLink to your terms of service
post_logout_redirect_urisAllowed URLs for post-logout redirect

How to Configure​

When requesting OAuth2 credentials, provide these fields in your application. For existing clients, contact us to update your configuration.

Logo Display​

Your logo appears on the consent page when users authorize your app:

┌─────────────────────────────────────┐
│       [Your App Logo]               │
│                                     │
│   "Your App Name" wants to access   │
│   your Quran.Foundation account     │
│                                     │
│   ☑ Read your bookmarks             │
│   ☑ Access your collections         │
│                                     │
│   [Deny]            [Allow]         │
└─────────────────────────────────────┘

Requirements:

  • Logo should be a public HTTPS URL
  • Recommended size: 200x200 pixels minimum
  • Supported formats: PNG, JPG, SVG

Post-Logout Redirect​

To enable redirect after logout, you must pre-register the URI in post_logout_redirect_uris.

// Example logout with redirect
const params = new URLSearchParams({
  post_logout_redirect_uri: "https://your-app.com/",
});

const logoutUrl = `https://oauth2.quran.foundation/oauth2/sessions/logout?${params}`;
Without Pre-Registration

If post_logout_redirect_uri is not pre-registered in your client configuration, users will remain on the OAuth2 provider's page after logout.

Example Client Configuration​

Here's what a complete client configuration looks like:

{
  "client_id": "your-app-id",
  "client_name": "Your Amazing Quran App",
  "logo_uri": "https://your-app.com/logo.png",
  "client_uri": "https://your-app.com",
  "policy_uri": "https://your-app.com/privacy",
  "tos_uri": "https://your-app.com/terms",
  "redirect_uris": [
    "https://your-app.com/callback",
    "http://localhost:3000/callback"
  ],
  "post_logout_redirect_uris": [
    "https://your-app.com/",
    "http://localhost:3000/"
  ]
}

Next Steps​