Our great sponsors
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
import { PageProps, useServerSideQuery } from "rakkasjs"; export default function LoginPage({ url }: PageProps) { const error = url.searchParams.get("error"); const code = url.searchParams.get("code"); const state = url.searchParams.get("state"); const { data: userData } = useServerSideQuery(async () => { if (code && state === "12345") { const { access_token: token } = await fetch( "https://github.com/login/oauth/access_token" + `?client_id=${process.env.GITHUB_CLIENT_ID}` + `&client_secret=${process.env.GITHUB_CLIENT_SECRET}` + `&code=${code}`, { method: "POST", headers: { Accept: "application/json" }, } ).then((r) => r.json<{ access_token: string }>()); if (token) { const userData = fetch("https://api.github.com/user", { headers: { Authorization: `token ${token}`, }, }).then((r) => r.json()); return userData; } } }); if (error) { return
Error: {error}div>; } return{JSON.stringify(userData, null, 2)}pre>; }
Head over to GitHub Developer Settings, click OAuth Apps on the left and then click the "New OAuth app" button. It's gonna ask you a few questions. Enter http://localhost:5173 for the homepage URL and http://localhost:5173/login for the callback URL, and fill the rest as you like. We're giving localhost addresses because we have to test our app before deploying to its final URL. You can just update the URLs when you deploy or create a new app and keep this one for testing and development.