2e:null 2f:["$","title",null,{"children":"Hello, Supabase! | Andrew Wooldridge | Observable"}] 34:T592,

Fetch User Details

Logout

35:[] 32:{"id":"127ce86ddfb1d819","slug":"hello-supabase","title":"Hello, Supabase!","thumbnail":"44f7e9b3b9bfde0f9c624151449197c94349de05afe179f5ab81f061396d1875","access_level":"public","create_time":"$D2022-02-19T19:34:52.736Z","update_time":"$D2022-02-19T19:36:54.504Z","view_time":null,"first_public_time":"$D2022-02-19T19:35:58.290Z","has_unpublished_edits":null,"fork":{"id":"6e54fae1b52d0ec1","slug":"hello-supabase/2","title":"Hello, Supabase!","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"stars":1,"starred":false,"owner":{"type":"team","id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":"starter_2024"},"version":67,"publish_version":67,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null}],"members":[{"type":"individual","id":"b8d79ca293134247","login":"triptych","name":"Andrew Wooldridge","avatar_url":"https://avatars-next.observableusercontent.com/84b4215a79a8f07f1610f6650183c4793985ecf13ed3af2944962bee15c46c2e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"bef3cf5a9bdfd5d0","slug":"tips-and-utilities","title":"Tips and Utilities","owner":{"id":"2d6b5d0f9034e560","login":"triptych","name":"Andrew Wooldridge"}},"type":"notebook","body":{"title":"Hello, Supabase!","cells":[{"id":0,"value":"# Hello, Supabase!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"I wanted to learn how to do auth with Supabase, so I created this simple sign on page to test things out. You'll have to modify this if you want it to work with your own Secret : SUPABASE_ACCESS_KEY or put the key in the notebook. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"I'm using the \"[Vanilla JS Auth example](https://github.com/supabase/supabase/tree/master/examples/javascript-auth)\" from their Github examples:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"SupaBase = require(\"@supabase/supabase-js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"## Supabase Auth Example","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"$34","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"SUPABASE_URL = \"https://pxaruzggofkfcakgilvs.supabase.co\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"supabase = SupaBase.createClient(SUPABASE_URL, Secret(\"SUPABASE_ACCESS_KEY\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"window.userToken = null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"{\n console.log(\"run\")\n var signUpForm = document.querySelector('#sign-up')\n signUpForm.onsubmit = signUpSubmitted.bind(signUpForm)\n\n var logInForm = document.querySelector('#log-in')\n logInForm.onsubmit = logInSubmitted.bind(logInForm)\n\n var userDetailsButton = document.querySelector('#user-button')\n userDetailsButton.onclick = fetchUserDetails.bind(userDetailsButton)\n\n var logoutButton = document.querySelector('#logout-button')\n logoutButton.onclick = logoutSubmitted.bind(logoutButton)\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"signUpSubmitted = (event) => {\n event.preventDefault()\n const email = event.target[0].value\n const password = event.target[1].value\n\n supabase.auth\n .signUp({ email, password })\n .then((response) => {\n response.error ? console.log(response.error.message) : setToken(response)\n })\n .catch((err) => {\n console.log(err)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"logInSubmitted = (event) => {\n event.preventDefault()\n const email = event.target[0].value\n const password = event.target[1].value\n\n supabase.auth\n .signIn({ email, password })\n .then((response) => {\n response.error ? console.log(response.error.message) : setToken(response)\n })\n .catch((err) => {\n console.log(err.response.text)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"fetchUserDetails = () => {\n console.log(JSON.stringify(supabase.auth.user()))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"logoutSubmitted = (event) => {\n event.preventDefault()\n\n supabase.auth\n .signOut()\n .then((_response) => {\n document.querySelector('#access-token').value = ''\n document.querySelector('#refresh-token').value = ''\n console.log('Logout successful')\n })\n .catch((err) => {\n console.log(err.response.text)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"function setToken(response) {\n if (response.user.confirmation_sent_at && !response?.session?.access_token) {\n console.log('Confirmation Email Sent')\n } else {\n document.querySelector('#access-token').value = response.session.access_token\n document.querySelector('#refresh-token').value = response.session.refresh_token\n console.log('Logged in as ' + response.user.email)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"

Log In

Access Token

Refresh Token

Fetch User Details

Logout

Sign Up

Log In

Access Token

Refresh Token

Fetch User Details

Logout