Setup

\n To use this Val, fork it and set your Supabase credentials in the Val's environment variables:\n

\n
\n

Log in to your Supabase account.
Navigate to your project settings and find the API section.
Copy the project's URL and API key.
Setup the Val.town environment variables:

\n
\n

SUPABASE_URL: The base URL of your Supabase project.
SUPABASE_KEY: The anon API key for your Supabase project.

\n
\n

\n After setting these variables, go back to your Val and reload the page.\n

\n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n }\n\n const { createClient } = await import(\"https://esm.sh/@supabase/supabase-js@2\");\n const supabase = createClient(SUPABASE_URL, SUPABASE_KEY);\n\n const url = new URL(request.url);\n if (url.pathname === \"/auth/signup\" && request.method === \"POST\") {\n const { email, password } = await request.json();\n const { data, error } = await supabase.auth.signUp({ email, password });\n if (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n return new Response(JSON.stringify({ user: data.user }), { headers: { \"Content-Type\": \"application/json\" } });\n }\n\n if (url.pathname === \"/auth/login\" && request.method === \"POST\") {\n const { email, password } = await request.json();\n const { data, error } = await supabase.auth.signInWithPassword({ email, password });\n if (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n return new Response(JSON.stringify({ user: data.user }), { headers: { \"Content-Type\": \"application/json\" } });\n }\n\n if (url.pathname === \"/auth/user\") {\n const { data: { user } } = await supabase.auth.getUser();\n return new Response(JSON.stringify({ user }), { headers: { \"Content-Type\": \"application/json\" } });\n }\n\n if (url.pathname === \"/auth/logout\" && request.method === \"POST\") {\n const { error } = await supabase.auth.signOut();\n if (error) {\n return new Response(JSON.stringify({ error: error.message }), {\n status: 400,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n return new Response(JSON.stringify({ success: true }), { headers: { \"Content-Type\": \"application/json\" } });\n }\n\n return new Response(\n `\n \n \n Supabase Auth Demo\n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n background-color: #f0f0f0;\n}\n.container {\n max-width: 600px;\n margin: 40px auto;\n padding: 20px;\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\nh1, h2 {\n text-align: center;\n color: #333;\n}\nul, ol {\n margin: 20px 0;\n padding: 0 20px;\n}\nli {\n margin-bottom: 10px;\n}\npre {\n background-color: #f8f8f8;\n padding: 10px;\n border-radius: 4px;\n overflow-x: auto;\n}\na {\n color: #007bff;\n text-decoration: none;\n}\na:hover {\n text-decoration: underline;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/tkneisly/SupabaseAuthExample/code/main.tsx","extension","actionData","errors"]