import { Button, Card, Container, Heading, VStack } from "@chakra-ui/react"; import { useLoaderData } from "@remix-run/react"; export async function loader({ context }: { context: RequestContext }) { const { host, protocol } = new URL(context.request.url); return { client_id: context.env.ROBLOX_OAUTH_CLIENT_ID, host, protocol }; } export default function () { const loaderData = useLoaderData<typeof loader>(); return ( <Container pt="16vh"> <Card borderRadius="32px" p="4vh"> <VStack alignContent="center" gap="2vh"> <Heading>Verify your new Roblox account</Heading> <br /> <Button as="a" borderRadius="24px" colorScheme="blue" href={`https://apis.roblox.com/oauth/v1/authorize?client_id=${ loaderData.client_id }&redirect_uri=${encodeURIComponent( `${loaderData.protocol}//${loaderData.host}/api/data-transfers/verify`, )}&response_type=code&scope=openid%20profile`} > Verify </Button> </VStack> </Card> </Container> ); }