js
import { createContext, useState, useEffect, useContext } from 'react'
import { supabase } from '../utils/supabaseClient'
import { useRouter } from 'next/router'
import axios from 'axios'

const Context = createContext()

const Provider = ({ children }) => {
  let [isLoading, setIsLoading] = useState(true)
  let [session, setSession] = useState(null)
  const [user, setUser] = useState(supabase.auth.user())
  const router = useRouter()

  useEffect(() => {
    const getUserProfile = async () => {
      const sessionUser = supabase.auth.user()

      if(sessionUser) {
        const {data: profile} = await supabase
        .from('profile')
        .select('*')
        .eq('id', sessionUser.id)
        .single()

        setUser({
          ...sessionUser,
          ...profile,
        })

        setIsLoading(false)
      }
    }

    getUserProfile()

    supabase.auth.onAuthStateChange(() => {
      getUserProfile()
    })
  }, [])

  useEffect(() => {
    axios.post('/api/set-supabase-cookie', {
      event: user ? 'SIGNED_IN' : 'SIGNED_OUT',
      session: supabase.auth.session(),
    })
  }, [user])

  const login = async (email) => {
    await supabase.auth.signIn({email})
  }

  const logout = async () => {
    await supabase.auth.signOut()
    setUser(null)
    router.push('/')
  }

  const exposed = {
    user,
    login,
    logout,
    isLoading
  }

  return (
    <Context.Provider value={exposed}>
      {children}
    </Context.Provider>
  )
}

export const useUser = () => useContext(Context)

export default Provider

js
import { supabase } from '../../utils/supabaseClient'
import AuthTabs from './auth-tabs'

export default function Auth({}) {
  async function handleOAuthLogin(email) {
    let { error } = await supabase.auth.signIn({ email })
    if (error) console.error('Error: ', error.message)
  }

  return (
    <div>
      <AuthTabs />
    </div>
  )
}

js
import { useState } from 'react'
import { supabase } from '../../utils/supabaseClient'

export default function SignIn({}) {
  const [email, setEmail] = useState('')

  const handleSignIn = async (email) => {
    try {
      const { error, user } = await supabase.auth.signIn({ email })
      if (!error && !user) alert('Check your email for the login link!')
      if (error) console.error('Error returned:', error.message)
    } catch (error) {
      console.error('Error thrown:', error.message)
      alert(error.error_description || error)
    }
  }

  return (
    <div>
      <div>
        <div>
          <label>Email</label>
          <input
            type="text"
            name='email'
            placeholder="Your email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>

        <div>
          <a
            onClick={(e) => {
              e.preventDefault()
              handleSignIn(email)
            }}
            href={'/channels'}
            className="border border-navy bg-navy py-2 px-4 text-center font-bold text-snow"
          >
            Sign In
          </a>
        </div>
      </div>
    </div>
  )
}

js
import { useState } from 'react'
import { supabase } from '../../utils/supabaseClient'

export default function SignUp({}) {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  const handleSignUp = async (email, password) => {
    try {
      const { error, user } = await supabase.auth.signUp(
        {
          email,
          password,
        }
      )
      if (!error) alert('Check your email for the login link!')
      if (error) {
        console.error(
          `Error Status: ${error.status}, Message: ${error.message}`
        )
        alert(`Error Message: ${error.message}`)
      }
    } catch (error) {
      console.error('Error thrown:', error.message)
      alert(error.error_description || error)
    }
  }

  return (
    <div>
      <div>
        <div>
          <label>Email</label>
          <input
            type="text"
            placeholder="Your email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
          />
        </div>
        <div>
          <label>Password</label>
          <input
            type="password"
            placeholder="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
          />
        </div>

        <div>
          <a
            onClick={(e) => {
              e.preventDefault()
              handleSignUp(email, password)
            }}
            href={'/channels'}
            className=""
          >
            Sign up
          </a>
        </div>
      </div>
    </div>
  )
}

POST https://provagxtnmrfxtldadcr.supabase.co/auth/v1/otp 500

Error returned: Database error saving new user

security definer

Failed to load resource: the server responded with a status of 406 ()

begin
  insert into public.users (uid, email)
  values (new.id, new.email);
  return new;
end;

Event message
current transaction is aborted, commands ignored until end of transaction block
Severity

ERROR

Postgres Username

supabase_auth_admin

Session ID

62a203b5.43dd

Metadata
{
  "file": "/var/log/postgresql/postgresql.csv",
  "host": "db-provagxtnmrfxtldadcr",
  "parsed": [
    {
      "application_name": null,
      "backend_type": "client backend",
      "command_tag": "DEALLOCATE",
      "connection_from": "10.109.104.183:37921",
      "context": null,
      "database_name": "postgres",
      "detail": null,
      "error_severity": "ERROR",
      "hint": null,
      "internal_query": null,
      "internal_query_pos": null,
      "leader_pid": null,
      "location": null,
      "process_id": 17373,
      "query": "deallocate \"pgx_281\"",
      "query_id": 0,
      "query_pos": null,
      "session_id": "62a203b5.43dd",
      "session_line_num": 1902,
      "session_start_time": "2022-06-09 14:29:09 UTC",
      "sql_state_code": "25P02",
      "timestamp": "2022-06-15 16:21:49.742 UTC",
      "transaction_id": 1751,
      "user_name": "supabase_auth_admin",
      "virtual_transaction_id": "10/0"
    }
  ],
  "parsed_from": null,
  "project": "provagxtnmrfxtldadcr",
  "source_type": "file"
}

js
import initStripe from 'stripe'
import {supabase} from '../../utils/supabaseClient'

const handler = async (req, res) => {
  if(req.query.API_ROUTE_SECRET !== process.env.API_ROUTE_SECRET) {
    return res.status(401).send("You're not authorized to call this API endpoint")
  }
  console.log(req.body)

  const stripe = initStripe(process.env.STRIPE_SECRET_KEY)

  const customer = await stripe.customers.create({
    email: req.body.email
  })
  console.log({customer})

  await supabase.from('profile').update({
    stripe_customer: customer.id
  }).eq('id', req.body.id)

  res.send({ message: `stripe customer created: ${customer.id}`})
}

export default handler