huggyface-deploy-wizard / oauth-callback.html
elcrei's picture
400
3e83655 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OAuth Callback</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
async function handleOAuthCallback() {
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
const error = params.get('error');
if (error) {
window.opener.postMessage({
type: 'oauth-error',
error: error
}, window.location.origin);
window.close();
return;
}
if (!code) {
window.opener.postMessage({
type: 'oauth-error',
error: 'No authorization code received'
}, window.location.origin);
window.close();
return;
}
try {
const codeVerifier = localStorage.getItem('code_verifier');
localStorage.removeItem('code_verifier');
const response = await fetch('https://huggingface.co/oauth/token', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
grant_type: 'authorization_code',
code,
redirect_uri: window.location.origin + '/oauth-callback.html',
client_id: 'your_client_id',
code_verifier: codeVerifier
})
});
if (!response.ok) {
throw new Error('Token exchange failed');
}
const data = await response.json();
window.opener.postMessage({
type: 'oauth-success',
token: data.access_token
}, window.location.origin);
window.close();
} catch (error) {
window.opener.postMessage({
type: 'oauth-error',
error: error.message
}, window.location.origin);
window.close();
}
}
document.addEventListener('DOMContentLoaded', handleOAuthCallback);
</script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen flex items-center justify-center">
<div class="text-center p-8">
<div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-primary-500 mx-auto mb-4"></div>
<h2 class="text-xl font-semibold mb-2">Completing Authentication</h2>
<p class="text-gray-400">You will be redirected shortly...</p>
</div>
</body>
</html>