My Log-in override for Supabase is not working in Framer
Hello, I need some help with my code please.
7 Replies
export function getEmail(Component): ComponentType {
return (props) => {
const [store, setStore] = useStore()
return <Component {...props} text={store.loginEmailValue} />
}
}
export function checkEmail(Component): ComponentType {
return (props) => {
const [store, setStore] = useStore()
const result = (value) => {
var usernameResult = checkUsername(value, store.supabase)
usernameResult.then((resultValue) => {
console.log(resultValue)
setStore({ loginEmail: resultValue, loginEmailValue: value })
})
}
return <Component {...props} onChange={result} />
}
}
export function checkPass(Component): ComponentType {
return (props) => {
const [store, setStore] = useStore()
const result = (value) => {
var passResult = checkPassword(
store.loginEmailValue,
md5(value),
store.supabase
)
passResult.then((value) => {
setStore({ ...store, loginPass: value })
})
}
return <Component {...props} onChange={result} />
}
}
export function Login(Component): ComponentType {
return (props) => {
const [store, setStore] = useStore()
console.log(store.loginEmail, store.loginPass)
const getState = () => {
return store.loginEmail == true && store.loginPass == true
? {
disabled: false,
pointerEvents: "all",
backgroundColor: "#CB4855",
}
: {
disabled: true,
pointerEvents: "none",
backgroundColor: "#c9c9c9",
}
}
return <Component {...props} style={getState()} />
}
}
export function getEmail(Component): ComponentType {
return (props) => {
const [store, setStore] = useStore()
return <Component {...props} text={store.loginEmailValue} />
}
}
export function checkEmail(Component): ComponentType {
return (props) => {
const [store, setStore] = useStore()
const result = (value) => {
var usernameResult = checkUsername(value, store.supabase)
usernameResult.then((resultValue) => {
console.log(resultValue)
setStore({ loginEmail: resultValue, loginEmailValue: value })
})
}
return <Component {...props} onChange={result} />
}
}
export function checkPass(Component): ComponentType {
return (props) => {
const [store, setStore] = useStore()
const result = (value) => {
var passResult = checkPassword(
store.loginEmailValue,
md5(value),
store.supabase
)
passResult.then((value) => {
setStore({ ...store, loginPass: value })
})
}
return <Component {...props} onChange={result} />
}
}
export function Login(Component): ComponentType {
return (props) => {
const [store, setStore] = useStore()
console.log(store.loginEmail, store.loginPass)
const getState = () => {
return store.loginEmail == true && store.loginPass == true
? {
disabled: false,
pointerEvents: "all",
backgroundColor: "#CB4855",
}
: {
disabled: true,
pointerEvents: "none",
backgroundColor: "#c9c9c9",
}
}
return <Component {...props} style={getState()} />
}
}
import { Component, ComponentType, useEffect } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { randomColor } from "https://framer.com/m/framer/utils.js@^0.9.0"
import { md5 } from "https://cdn.skypack.dev/pure-md5"
import { browser, checkUsername, checkPassword, useStore } from "./globals.ts"
import { createClient } from "https://cdn.skypack.dev/@supabase/supabase-js"
import { Component, ComponentType, useEffect } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { randomColor } from "https://framer.com/m/framer/utils.js@^0.9.0"
import { md5 } from "https://cdn.skypack.dev/pure-md5"
import { browser, checkUsername, checkPassword, useStore } from "./globals.ts"
import { createClient } from "https://cdn.skypack.dev/@supabase/supabase-js"
I don't see anything supabase related in this code and I'm not sure what error you are getting or what you need help with.
It's react code.
What happens is I get this error in the console:
"42703"
details
:
null
hint
:
"Perhaps you meant to reference the column \"accounts.userType\"."
message
:
"column accounts.username does not exist"
"42703"
details
:
null
hint
:
"Perhaps you meant to reference the column \"accounts.userType\"."
message
:
"column accounts.username does not exist"
What I'm saying is you are asking how to fix an issue but there is no reference in your code to the issue. Where are you making the supabase call in your code?
In my Initiate override I initiate Supabase
I think I have an ideea where the error is coming from!
In my Globals override I have this:
nvm, I modified it and it still doesn't work
import { Component, ComponentType, useEffect } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { randomColor } from "https://framer.com/m/framer/utils.js@^0.9.0"
import { md5 } from "https://cdn.skypack.dev/pure-md5"
import { browser, checkUsername, checkPassword, useStore } from "./globals.ts"
import { createClient } from "https://cdn.skypack.dev/@supabase/supabase-js"
export function InitialiseSupabase(Component): ComponentType {
return (props) => {
const [store, setStore] = useStore()
useEffect(() => {
const supabase = createClient(
"key hidden",
"key hidden"
)
setStore({ supabase: supabase })
console.log(supabase)
}, [])
return <Component {...props} />
}
}
import { Component, ComponentType, useEffect } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
import { randomColor } from "https://framer.com/m/framer/utils.js@^0.9.0"
import { md5 } from "https://cdn.skypack.dev/pure-md5"
import { browser, checkUsername, checkPassword, useStore } from "./globals.ts"
import { createClient } from "https://cdn.skypack.dev/@supabase/supabase-js"
export function InitialiseSupabase(Component): ComponentType {
return (props) => {
const [store, setStore] = useStore()
useEffect(() => {
const supabase = createClient(
"key hidden",
"key hidden"
)
setStore({ supabase: supabase })
console.log(supabase)
}, [])
return <Component {...props} />
}
}
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
export const useStore = createStore({
background: "#0099FF",
supabase: undefined,
email: "",
pass: "",
passStrength: 0,
passColor: "#EB544C",
loginEmailValue: "",
loginEmail: false,
loginPass: false,
})
export const checkUsername = async (email, supabase) => {
let { data: accounts, error } = await supabase
.from("accounts")
.select("username")
if (accounts && accounts.length > 0) {
console.log(">>> ", accounts, accounts[0].username, email)
const result = accounts.filter((value) => {
return value.username.toLowerCase() == email.toLowerCase()
})
if (result.length > 0) {
return true
} else {
return false
}
} else {
return false
}
}
export const checkPassword = async (email, pass, supabase) => {
let { data: accounts, error } = await supabase
.from("accounts")
.select("userpass")
.eq("username", email)
if (accounts && accounts.length > 0) {
console.log(">>>", accounts[0].userpass, pass)
if (accounts[0].userpass == pass) {
return true
} else {
return false
}
} else {
return false
}
}
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"
export const useStore = createStore({
background: "#0099FF",
supabase: undefined,
email: "",
pass: "",
passStrength: 0,
passColor: "#EB544C",
loginEmailValue: "",
loginEmail: false,
loginPass: false,
})
export const checkUsername = async (email, supabase) => {
let { data: accounts, error } = await supabase
.from("accounts")
.select("username")
if (accounts && accounts.length > 0) {
console.log(">>> ", accounts, accounts[0].username, email)
const result = accounts.filter((value) => {
return value.username.toLowerCase() == email.toLowerCase()
})
if (result.length > 0) {
return true
} else {
return false
}
} else {
return false
}
}
export const checkPassword = async (email, pass, supabase) => {
let { data: accounts, error } = await supabase
.from("accounts")
.select("userpass")
.eq("username", email)
if (accounts && accounts.length > 0) {
console.log(">>>", accounts[0].userpass, pass)
if (accounts[0].userpass == pass) {
return true
} else {
return false
}
} else {
return false
}
}
Your error says you are doing the .eq on username, but you don't have username column in accounts table. It is guessing you meant userType column. Also unless you are using Prisma please save yourself a lot of grief and don't use upper case column or table names in Postgres.
I did change those to the names I have in my table but it still won't work
It's strange cause the registration works
For some reason it has issues fetching data from the table
thank you for the advice
Solved!