dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-17 07:09:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: remove styling

Browse Source
This commit is contained in:
joel committed 2024-12-13 16:10:42 +08:00
1 parent 70d0d23eaa
commit 95f446da36
1 file changed
+66 -90
Download Patch File Download Diff File Expand all files Collapse all files
apps/docs/content/guides/auth/quickstarts/react.mdx
+66 -90
View File
@@ -73,103 +73,79 @@ hideToc: true
```js src/App.js
import React, { useState } from 'react';
import { createClient } from '@supabase/supabase-js'
import React, { useState } from 'react';
import { createClient } from '@supabase/supabase-js'
function App() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
function App() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
async function signInWithEmail(e) {
e.preventDefault();
setLoading(true);
const { error } = await supabase.auth.signInWithPassword({ email, password });
if (error) alert(error.message);
setLoading(false);
}
const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
async function signUpWithEmail() {
setLoading(true);
const { data: { session }, error } = await supabase.auth.signUp({ email, password });
if (error) alert(error.message);
if (!session) alert('Please check your inbox for email verification!');
setLoading(false);
}
async function signInWithEmail() {
setLoading(true);
const { error } = await supabase.auth.signInWithPassword({ email, password});
if (error) alert(error.message);
setLoading(false);
}
async function signUpWithEmail() {
setLoading(true);
const { data: { session }, error} = await supabase.auth.signUp({ email, password});
if (error) alert(error.message);
if (!session) alert('Please check your inbox for email verification!');
setLoading(false);
}
const styles = {
container: {
maxWidth: '300px',
margin: '20px auto',
padding: '20px',
},
formGroup: {
marginBottom: '15px',
},
label: {
display: 'block',
marginBottom: '5px',
},
input: {
width: '100%',
padding: '8px',
marginBottom: '10px',
},
button: {
padding: '8px 16px',
marginRight: '10px',
cursor: 'pointer',
}
};
return (
<div style={styles.container}>
<div style={styles.formGroup}>
<label style={styles.label}>
Email:
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="email@address.com"
style={styles.input}
/>
</label>
</div>
<div style={styles.formGroup}>
<label style={styles.label}>
Password:
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
style={styles.input}
/>
</label>
</div>
<button
onClick={signInWithEmail}
disabled={loading}
style={styles.button}
>
Sign in
</button>
<button
onClick={signUpWithEmail}
disabled={loading}
style={styles.button}
>
Sign up
</button>
return (
<div>
<form onSubmit={signInWithEmail}>
<div>
<label htmlFor="email">
Email:
<input
id="email"
name="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="email@address.com"
/>
</label>
</div>
<div>
<label htmlFor="password">
Password:
<input
id="password"
name="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Password"
/>
</label>
</div>
<button
type="submit"
disabled={loading}
>
Sign in
</button>
<button
type="button"
onClick={signUpWithEmail}
disabled={loading}
>
Sign up
</button>
</form>
</div>
);
}
export default App
export default App;
```
</StepHikeCompact.Code>