([]);
useEffect(() => {
fetch('/api/auth/v1/oauth/providers')
.then(res => res.json())
.then(data => setProviders(data.providers));
}, []);
const handleOAuthLogin = (provider: string) => {
const redirectUrl = encodeURIComponent(window.location.pathname);
window.location.href = `/api/auth/v1/oauth/${provider}?redirect_url=${redirectUrl}`;
};
return (
{providers.map(provider => (
))}
);
}
```
## User Profile Data
OAuth providers return different user information:
```rust theme={null}
// From crates/core/src/auth/oauth/mod.rs
pub struct OAuthUser {
pub provider_user_id: String, // Provider's user ID
pub provider_id: OAuthProviderId,
pub email: Option,
pub verified: bool,
pub name: Option,
pub avatar_url: Option,
}
```
## Admin API
### List Available OAuth Providers
```bash theme={null}
curl -H "Authorization: Bearer $ADMIN_TOKEN" \
https://api.example.com/_/admin/oauth/providers
```
**Response:**
```json theme={null}
{
"providers": [
{
"id": 2,
"name": "google",
"display_name": "Google"
},
{
"id": 3,
"name": "github",
"display_name": "GitHub"
}
]
}
```
## Provider Implementation
Each provider implements the `OAuthProvider` trait:
```rust theme={null}
// From crates/core/src/auth/oauth/mod.rs
pub trait OAuthProvider: Send + Sync {
fn name(&self) -> &str;
fn provider(&self) -> OAuthProviderId;
fn settings(&self) -> Result;
fn oauth_scopes(&self) -> Vec<&'static str>;
async fn get_user(
&self,
token_response: &TokenResponse
) -> Result;
}
```
## Troubleshooting
**Error:** "redirect\_uri\_mismatch"
**Solution:** Ensure the callback URL in your provider settings exactly matches:
```
https://yourdomain.com/api/auth/v1/oauth/{provider}/callback
```
Check:
* Protocol (http vs https)
* Domain name
* Port (if not 80/443)
* Path (including `/callback`)
**Error:** "OAuth requires a public URL"
**Solution:** Add `site_url` to your config:
```protobuf theme={null}
server {
site_url: "https://yourdomain.com"
}
```
**Error:** "invalid\_client"
**Solution:**
* Verify client\_id is correct
* Ensure client\_secret hasn't expired
* Check provider dashboard for any issues
* Regenerate credentials if necessary
**Error:** User data missing (email, name, etc.)
**Solution:** Check OAuth scopes. TrailBase requests:
* Google: `openid email profile`
* GitHub: `user:email`
* Discord: `identify email`
Ensure these scopes are approved in your OAuth app settings.
## Best Practices
OAuth requires HTTPS for redirect URIs in production. Use certificates from Let's Encrypt or your provider.
Periodically regenerate client secrets and update your configuration.
Only request the OAuth scopes your application actually needs.
Implement fallback authentication methods (email/password) in case OAuth providers are unavailable.
Test OAuth flows in development before deploying to production.
## Next Steps
Configure email for fallback auth
Build custom auth flows
Store user avatars
Sync OAuth data
Sign in with Google
Sign in with GitHub
Sign in with Microsoft
```
### React Component
```tsx theme={null}
import React, { useEffect, useState } from 'react';
interface Provider {
name: string;
display_name: string;
}
export function OAuthButtons() {
const [providers, setProviders] = useState