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 (must match a redirect URI's scheme/domain/port)

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. The post-logout URL must share the same scheme, domain, and port as at least one entry in redirect_uris.

Examples:

  • Redirect URI: https://your-app.com/callback → Post-logout: https://your-app.com/logout
  • Redirect URI: http://localhost:3000/callback → Post-logout: http://localhost:3000/logout
// Example logout with redirect
const params = new URLSearchParams({
  post_logout_redirect_uri: "https://your-app.com/",
  // Required when using post_logout_redirect_uri
  id_token_hint: idTokenFromLogin,
});

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.

Missing ID Token Hint

If you include post_logout_redirect_uri without id_token_hint, the logout request will be rejected. Use the ID token returned during login (id_token) as the hint.

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​