Spaces:
Running
Running
import { useState } from "react"; | |
import { signup } from "../hooks/auth"; | |
function Signup() { | |
const [username, setUsername] = useState(""); | |
const [email, setEmail] = useState(""); | |
const [password, setPassword] = useState(""); | |
const [confirmPassword, setConfirmPassword] = useState(""); | |
const [isLoggedIn, setIsLoggedIn] = useState(false); | |
const handleSubmit = async (e) => { | |
e.preventDefault(); | |
if (password !== confirmPassword) { | |
// show error message | |
return; | |
} | |
const res = await signup(username, email, password); | |
if (res.ok) { | |
setIsLoggedIn(true); | |
// redirect to profile page | |
} else { | |
// show error message | |
} | |
}; | |
return ( | |
<form onSubmit={handleSubmit}> | |
<h1>Signup</h1> | |
<label htmlFor="username">Username</label> | |
<input | |
type="text" | |
name="username" | |
id="username" | |
value={username} | |
onChange={(e) => setUsername(e.target.value)} | |
/> | |
<label htmlFor="email">Email</label> | |
<input | |
type="email" | |
name="email" | |
id="email" | |
value={email} | |
onChange={(e) => setEmail(e.target.value)} | |
/> | |
<label htmlFor="password">Password</label> | |
<input | |
type="password" | |
name="password" | |
id="password" | |
value={password} | |
onChange={(e) 'This is the README.md file for my TikTok clone app.')' | |
version: '0.1.1' | |
title: 'My TikTok Clone' | |
description: 'I would like to build up a app as TikTok using nextjs.' | |
license: 'ISC' | |
rootDir: '.' | |
dependencies: | |
'@types/node' | |
@types/react' | |
@types/react-dom' | |
react' | |
react-dom' | |
typescript' | |
devDependencies: | |
'@types/node' | |
@types/react' | |
@types/react-dom' | |
react' | |
react-dom' | |
typescript' | |
huskey: | |
["preinstall", "install"] | |
preinstall: "" | |
install: "npm install" | |
plugins: | |
@types/node' | |
@types/react' | |
@types/react-dom' | |
react' | |
react-dom' | |
typescript' | |
# In src/styles/style.css: | |
body { | |
margin: 0; | |
padding: 0; | |
text-align: center; | |
} | |
h1 { | |
font-size: 3em; | |
} | |
a { | |
color: brown; | |
} | |
# In src/utils/auth.js: | |
import crypto from 'crypto'; | |
function generateAuthToken() { | |
return crypto.randomBytes(32).toString('hex'); | |
} | |
export async function signup(username, email, password) { | |
const authToken = generateAuthToken(); | |
const userData = { | |
username, | |
email, | |
password: crypto.createHash('sha256').update(password).digest('hex'), | |
authToken, | |
}; | |
// Your supabase database code goes here | |
return { | |
ok: true, | |
data: userData, | |
}; | |
} | |
export async function login(username, password) { | |
const userData = { | |
email, | |
password: crypto.createHash('sha256').update(password).digest('hex'), | |
}; | |
// Your supabase database code goes here | |
return { | |
ok: true, | |
data: userData, | |
}; | |
} |