The avatar for @triptych
Andrew Wooldridge
📜JavaScript developer. 🐲RPG fan. 📚Storyteller and 🕹game developer. 👨Father and Husband.
Published
Edited
Feb 19, 2022
Fork of Hello, Supabase!
1 star
Working Libraries
Hello, Smart Shape!Hello, messagepipe!Hello, Atomico!Hello, Markdown-Tag !Hello, js-sdl!Hello Trivia API!Hello auto-animate!Hello, papa parse!Hello, lazy.js!Hello, mout!Hello, sugar js!Hello, lil-gui!Hello, owoify-js!Hello, Maverick JS -> Observables!Hello, Canvas Confetti!Hello, OWL!Hello, Bunny Fonts!Hello Color JS!Hello, Kute.js !Hello Color Legend Element!Hello, is-online!Hello, pretty-ms!Hello, Liveblocks!Convex ChatHello, filesize.js!Hello, SVG.jsHello, Counter-element!Hello, Ramda!Hello, Block Protocol!Hello, Reef!Hello, Croquet!Hello, Markdoc!Hello, Multiavatar!Hello, Tableful!Hello, kdl-jsHello, Wild Wild Path!Hello, Lexical!Hello, Statery!Hello, pdfme!Shuffle an ArrayHello, PikasoHello, Miniplex!Hello, CandyGraph!
Hello, Supabase!
Hello, Embla Carousel!Hello, core-js!Hello, tinybaseHello, umbrellajsHello, pintoraSkypack PixijsHello, sortablejsHello, JS-YAMLTesting bitECS for TempestHello jService!Hello, iro.jsHello, SplideHello, Cosmic JSHello, singuiKaboom JS TemplateHello, JSPDFHello, Awesome Dev JokesRandom DAD JokeHello, model-viewerThe OracleTarot UtilitiesHello, lokiJSHello, cash ( cash-dom )Hello, Dice RollerHello, Slide-ElementHello, tsParticlesKaboom - dynamic valuesHello Lit.devHello, Melon JSHello Kontra
Also listed in…
Supabase
Tips and Utilities
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
<div id="container">
<div class='section'>
<form id='sign-up'>
<h3>Sign Up</h3>
<label>Email</label><input type='email' name='email' />
<label>Password</label><input type='password' name='password' />
<input type='submit'>
</form>
</div>
<div class='section'>
<form id='log-in'>
<h3>Log In</h3>
<label>Email</label><input type='email' name='email' />
<label>Password</label><input type='password' name='password' />
<input type='submit'>
</form>
</div>
<div class='section'>
<form id='validate'>
<h3>Access Token</h3>
<input readonly=readonly type='text' id='access-token' /> <small>Default expiry is 60 minutes</small>
<h3>Refresh Token</h3>
<input readonly=readonly type='text' id='refresh-token' /> <small>Supabase-js will use this to automatically fetch a new accessToken for you every 60 mins whilst the client is running</small>
</form>
</div>
<div class='section'>
<h3>Fetch User Details</h3>
<button id='user-button'>Fetch</button>
</div>
<div class='section'>
<h3>Logout</h3>
<button id='logout-button'>Logout</button>
</div>
</div>
Insert cell
<style>
body #container {
/* margin: 0; */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: rgb(250, 217, 246);
}

label {
margin: 0.5em;
}

.section {
margin: 1em;
}
</style>
Insert cell
SUPABASE_URL = "https://pxaruzggofkfcakgilvs.supabase.co"
Insert cell
supabase = SupaBase.createClient(SUPABASE_URL, Secret("SUPABASE_ACCESS_KEY"))
Insert cell
window.userToken = null
Insert cell
{
console.log("run")
var signUpForm = document.querySelector('#sign-up')
signUpForm.onsubmit = signUpSubmitted.bind(signUpForm)

var logInForm = document.querySelector('#log-in')
logInForm.onsubmit = logInSubmitted.bind(logInForm)

var userDetailsButton = document.querySelector('#user-button')
userDetailsButton.onclick = fetchUserDetails.bind(userDetailsButton)

var logoutButton = document.querySelector('#logout-button')
logoutButton.onclick = logoutSubmitted.bind(logoutButton)

}
Insert cell
signUpSubmitted = (event) => {
event.preventDefault()
const email = event.target[0].value
const password = event.target[1].value

supabase.auth
.signUp({ email, password })
.then((response) => {
response.error ? console.log(response.error.message) : setToken(response)
})
.catch((err) => {
console.log(err)
})
}
Insert cell
logInSubmitted = (event) => {
event.preventDefault()
const email = event.target[0].value
const password = event.target[1].value

supabase.auth
.signIn({ email, password })
.then((response) => {
response.error ? console.log(response.error.message) : setToken(response)
})
.catch((err) => {
console.log(err.response.text)
})
}
Insert cell
fetchUserDetails = () => {
console.log(JSON.stringify(supabase.auth.user()))
}
Insert cell
logoutSubmitted = (event) => {
event.preventDefault()

supabase.auth
.signOut()
.then((_response) => {
document.querySelector('#access-token').value = ''
document.querySelector('#refresh-token').value = ''
console.log('Logout successful')
})
.catch((err) => {
console.log(err.response.text)
})
}
Insert cell
function setToken(response) {
if (response.user.confirmation_sent_at && !response?.session?.access_token) {
console.log('Confirmation Email Sent')
} else {
document.querySelector('#access-token').value = response.session.access_token
document.querySelector('#refresh-token').value = response.session.refresh_token
console.log('Logged in as ' + response.user.email)
}
}
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more