Spaces:
Running
Running
File size: 2,743 Bytes
f371b37 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
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,
};
} |