Cloudflare Pages Oauth (Google/Github)
I was developing trying to implement github oauth on cloudfare pages using a beta branch. the production branch is define as another branch and the production branch contains the main url. It works locally but not on cloudflare pages
my oauth flow looks like this at the moment
export async function GET(context: APIContext): Promise<Response> {
const state = generateState();
const url = await github.createAuthorizationURL(state);
context.cookies.set("github_oauth_state", state, {
path: "/",
secure: DEPLOYED_ENV,
httpOnly: true,
maxAge: 60 * 10,
sameSite: "lax"
});
const responseBody = {
url: url.toString()
};
const response = new Response(JSON.stringify(responseBody), {
status: 200,
headers: {
"content-type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, PUT, POST, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "*"
}
});
return response;
}
export async function GET(context: APIContext): Promise<Response> {
const state = generateState();
const url = await github.createAuthorizationURL(state);
context.cookies.set("github_oauth_state", state, {
path: "/",
secure: DEPLOYED_ENV,
httpOnly: true,
maxAge: 60 * 10,
sameSite: "lax"
});
const responseBody = {
url: url.toString()
};
const response = new Response(JSON.stringify(responseBody), {
status: 200,
headers: {
"content-type": "application/json",
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, PUT, POST, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "*"
}
});
return response;
}
2 Replies
Frontend
callback
async function handleAuth() {
let realHref: string = href;
try {
const response = await fetch(realHref, { credentials: "include" });
const jsonResponse = await response.json();
let url = jsonResponse.url;
realHref = url;
console.log(jsonResponse);
if (url.includes("google")) {
realHref = addGoogleRedirectUri(url);
}
window.location.replace(realHref);
} catch (error) {
console.log(error);
}
}
async function handleAuth() {
let realHref: string = href;
try {
const response = await fetch(realHref, { credentials: "include" });
const jsonResponse = await response.json();
let url = jsonResponse.url;
realHref = url;
console.log(jsonResponse);
if (url.includes("google")) {
realHref = addGoogleRedirectUri(url);
}
window.location.replace(realHref);
} catch (error) {
console.log(error);
}
}
context.cookies.set("auth-session", cookieString, {
path: "/",
secure: DEPLOYED_ENV,
httpOnly: true,
maxAge: 60 * 10,
sameSite: "lax"
});
await setUserSession(
cookieString,
{
username_tag: userId,
profile_picture_url: googleUser.picture,
}
).catch((error) => {
console.error(error);
return new Response("Unable to set user session", {
status: 500,
});
});
return context.redirect("/postsignup");
context.cookies.set("auth-session", cookieString, {
path: "/",
secure: DEPLOYED_ENV,
httpOnly: true,
maxAge: 60 * 10,
sameSite: "lax"
});
await setUserSession(
cookieString,
{
username_tag: userId,
profile_picture_url: googleUser.picture,
}
).catch((error) => {
console.error(error);
return new Response("Unable to set user session", {
status: 500,
});
});
return context.redirect("/postsignup");