mirror of
https://github.com/FranP-code/create-better-t-stack.git
synced 2025-10-12 23:52:15 +00:00
feat: add clerk auth support with convex (#548)
This commit is contained in:
Aman Varshney
@@ -0,0 +1,13 @@
|
||||
import { createAuthClient } from "better-auth/react";
|
||||
import { expoClient } from "@better-auth/expo/client";
|
||||
import * as SecureStore from "expo-secure-store";
|
||||
|
||||
export const authClient = createAuthClient({
|
||||
baseURL: process.env.EXPO_PUBLIC_SERVER_URL,
|
||||
plugins: [
|
||||
expoClient({
|
||||
storagePrefix: "my-better-t-app",
|
||||
storage: SecureStore,
|
||||
}),
|
||||
],
|
||||
});
|
||||
@@ -0,0 +1,95 @@
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
|
||||
|
||||
import { Container } from "@/components/container";
|
||||
import { SignIn } from "@/components/sign-in";
|
||||
import { SignUp } from "@/components/sign-up";
|
||||
{{#if (eq api "orpc")}}
|
||||
import { queryClient, orpc } from "@/utils/orpc";
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
import { queryClient, trpc } from "@/utils/trpc";
|
||||
{{/if}}
|
||||
|
||||
export default function Home() {
|
||||
{{#if (eq api "orpc")}}
|
||||
const healthCheck = useQuery(orpc.healthCheck.queryOptions());
|
||||
const privateData = useQuery(orpc.privateData.queryOptions());
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
const healthCheck = useQuery(trpc.healthCheck.queryOptions());
|
||||
const privateData = useQuery(trpc.privateData.queryOptions());
|
||||
{{/if}}
|
||||
const { data: session } = authClient.useSession();
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<ScrollView className="flex-1">
|
||||
<View className="px-4">
|
||||
<Text className="font-mono text-foreground text-3xl font-bold mb-4">
|
||||
BETTER T STACK
|
||||
</Text>
|
||||
{session?.user ? (
|
||||
<View className="mb-6 p-4 bg-card rounded-lg border border-border">
|
||||
<View className="flex-row justify-between items-center mb-2">
|
||||
<Text className="text-foreground text-base">
|
||||
Welcome,{" "}
|
||||
<Text className="font-medium">{session.user.name}</Text>
|
||||
</Text>
|
||||
</View>
|
||||
<Text className="text-muted-foreground text-sm mb-4">
|
||||
{session.user.email}
|
||||
</Text>
|
||||
|
||||
<TouchableOpacity
|
||||
className="bg-destructive py-2 px-4 rounded-md self-start"
|
||||
onPress={() => {
|
||||
authClient.signOut();
|
||||
queryClient.invalidateQueries();
|
||||
}}
|
||||
>
|
||||
<Text className="text-white font-medium">Sign Out</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : null}
|
||||
<View className="mb-6 rounded-lg border border-border p-4">
|
||||
<Text className="mb-3 font-medium text-foreground">API Status</Text>
|
||||
<View className="flex-row items-center gap-2">
|
||||
<View
|
||||
className={`h-3 w-3 rounded-full ${
|
||||
healthCheck.data ? "bg-green-500" : "bg-red-500"
|
||||
}`}
|
||||
/>
|
||||
<Text className="text-muted-foreground">
|
||||
{healthCheck.isLoading
|
||||
? "Checking..."
|
||||
: healthCheck.data
|
||||
? "Connected to API"
|
||||
: "API Disconnected"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View className="mb-6 rounded-lg border border-border p-4">
|
||||
<Text className="mb-3 font-medium text-foreground">
|
||||
Private Data
|
||||
</Text>
|
||||
{privateData && (
|
||||
<View>
|
||||
<Text className="text-muted-foreground">
|
||||
{privateData.data?.message}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
{!session?.user && (
|
||||
<>
|
||||
<SignIn />
|
||||
<SignUp />
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
{{#if (eq api "trpc")}}
|
||||
import { queryClient } from "@/utils/trpc";
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
import { queryClient } from "@/utils/orpc";
|
||||
{{/if}}
|
||||
import { useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
export function SignIn() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleLogin = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
await authClient.signIn.email(
|
||||
{
|
||||
email,
|
||||
password,
|
||||
},
|
||||
{
|
||||
onError: (error) => {
|
||||
setError(error.error?.message || "Failed to sign in");
|
||||
setIsLoading(false);
|
||||
},
|
||||
onSuccess: () => {
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
queryClient.refetchQueries();
|
||||
},
|
||||
onFinished: () => {
|
||||
setIsLoading(false);
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="mt-6 p-4 bg-card rounded-lg border border-border">
|
||||
<Text className="text-lg font-semibold text-foreground mb-4">
|
||||
Sign In
|
||||
</Text>
|
||||
|
||||
{error && (
|
||||
<View className="mb-4 p-3 bg-destructive/10 rounded-md">
|
||||
<Text className="text-destructive text-sm">{error}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TextInput
|
||||
className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
placeholderTextColor="#9CA3AF"
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
placeholderTextColor="#9CA3AF"
|
||||
secureTextEntry
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleLogin}
|
||||
disabled={isLoading}
|
||||
className="bg-primary p-4 rounded-md flex-row justify-center items-center"
|
||||
>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
) : (
|
||||
<Text className="text-primary-foreground font-medium">Sign In</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,104 @@
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
{{#if (eq api "trpc")}}
|
||||
import { queryClient } from "@/utils/trpc";
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
import { queryClient } from "@/utils/orpc";
|
||||
{{/if}}
|
||||
import { useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
|
||||
export function SignUp() {
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSignUp = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
await authClient.signUp.email(
|
||||
{
|
||||
name,
|
||||
email,
|
||||
password,
|
||||
},
|
||||
{
|
||||
onError: (error) => {
|
||||
setError(error.error?.message || "Failed to sign up");
|
||||
setIsLoading(false);
|
||||
},
|
||||
onSuccess: () => {
|
||||
setName("");
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
queryClient.refetchQueries();
|
||||
},
|
||||
onFinished: () => {
|
||||
setIsLoading(false);
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="mt-6 p-4 bg-card rounded-lg border border-border">
|
||||
<Text className="text-lg font-semibold text-foreground mb-4">
|
||||
Create Account
|
||||
</Text>
|
||||
|
||||
{error && (
|
||||
<View className="mb-4 p-3 bg-destructive/10 rounded-md">
|
||||
<Text className="text-destructive text-sm">{error}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TextInput
|
||||
className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
|
||||
placeholder="Name"
|
||||
value={name}
|
||||
onChangeText={setName}
|
||||
placeholderTextColor="#9CA3AF"
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
className="mb-3 p-4 rounded-md bg-input text-foreground border border-input"
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
placeholderTextColor="#9CA3AF"
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
className="mb-4 p-4 rounded-md bg-input text-foreground border border-input"
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
placeholderTextColor="#9CA3AF"
|
||||
secureTextEntry
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleSignUp}
|
||||
disabled={isLoading}
|
||||
className="bg-primary p-4 rounded-md flex-row justify-center items-center"
|
||||
>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
) : (
|
||||
<Text className="text-primary-foreground font-medium">Sign Up</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { ScrollView, Text, TouchableOpacity, View } from "react-native";
|
||||
import { StyleSheet } from "react-native-unistyles";
|
||||
|
||||
import { Container } from "@/components/container";
|
||||
import { SignIn } from "@/components/sign-in";
|
||||
import { SignUp } from "@/components/sign-up";
|
||||
{{#if (eq api "orpc")}}
|
||||
import { queryClient, orpc } from "@/utils/orpc";
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
import { queryClient, trpc } from "@/utils/trpc";
|
||||
{{/if}}
|
||||
|
||||
export default function Home() {
|
||||
{{#if (eq api "orpc")}}
|
||||
const healthCheck = useQuery(orpc.healthCheck.queryOptions());
|
||||
const privateData = useQuery(orpc.privateData.queryOptions());
|
||||
{{/if}}
|
||||
{{#if (eq api "trpc")}}
|
||||
const healthCheck = useQuery(trpc.healthCheck.queryOptions());
|
||||
const privateData = useQuery(trpc.privateData.queryOptions());
|
||||
{{/if}}
|
||||
const { data: session } = authClient.useSession();
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<ScrollView>
|
||||
<View style={styles.pageContainer}>
|
||||
<Text style={styles.headerTitle}>BETTER T STACK</Text>
|
||||
{session?.user ? (
|
||||
<View style={styles.sessionInfoCard}>
|
||||
<View style={styles.sessionUserRow}>
|
||||
<Text style={styles.welcomeText}>
|
||||
Welcome,{" "}
|
||||
<Text style={styles.userNameText}>{session.user.name}</Text>
|
||||
</Text>
|
||||
</View>
|
||||
<Text style={styles.emailText}>{session.user.email}</Text>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.signOutButton}
|
||||
onPress={() => {
|
||||
authClient.signOut();
|
||||
queryClient.invalidateQueries();
|
||||
}}
|
||||
>
|
||||
<Text style={styles.signOutButtonText}>Sign Out</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
) : null}
|
||||
<View style={styles.apiStatusCard}>
|
||||
<Text style={styles.cardTitle}>API Status</Text>
|
||||
<View style={styles.apiStatusRow}>
|
||||
<View
|
||||
style={[
|
||||
styles.statusIndicatorDot,
|
||||
healthCheck.data
|
||||
? styles.statusIndicatorGreen
|
||||
: styles.statusIndicatorRed,
|
||||
]}
|
||||
/>
|
||||
<Text style={styles.mutedText}>
|
||||
{healthCheck.isLoading
|
||||
? "Checking..."
|
||||
: healthCheck.data
|
||||
? "Connected to API"
|
||||
: "API Disconnected"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={styles.privateDataCard}>
|
||||
<Text style={styles.cardTitle}>Private Data</Text>
|
||||
{privateData && (
|
||||
<View>
|
||||
<Text style={styles.mutedText}>
|
||||
{privateData.data?.message}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
{!session?.user && (
|
||||
<>
|
||||
<SignIn />
|
||||
<SignUp />
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</ScrollView>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create((theme) => ({
|
||||
pageContainer: {
|
||||
paddingHorizontal: 8,
|
||||
},
|
||||
headerTitle: {
|
||||
color: theme?.colors?.typography,
|
||||
fontSize: 30,
|
||||
fontWeight: "bold",
|
||||
marginBottom: 16,
|
||||
},
|
||||
sessionInfoCard: {
|
||||
marginBottom: 24,
|
||||
padding: 16,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: theme?.colors?.border,
|
||||
},
|
||||
sessionUserRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: 8,
|
||||
},
|
||||
welcomeText: {
|
||||
color: theme?.colors?.typography,
|
||||
fontSize: 16,
|
||||
},
|
||||
userNameText: {
|
||||
fontWeight: "500",
|
||||
color: theme?.colors?.typography,
|
||||
},
|
||||
emailText: {
|
||||
color: theme?.colors?.typography,
|
||||
fontSize: 14,
|
||||
marginBottom: 16,
|
||||
},
|
||||
signOutButton: {
|
||||
backgroundColor: theme?.colors?.destructive,
|
||||
paddingVertical: 8,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 6,
|
||||
alignSelf: "flex-start",
|
||||
},
|
||||
signOutButtonText: {
|
||||
fontWeight: "500",
|
||||
},
|
||||
apiStatusCard: {
|
||||
marginBottom: 24,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: theme?.colors?.border,
|
||||
padding: 16,
|
||||
},
|
||||
cardTitle: {
|
||||
marginBottom: 12,
|
||||
fontWeight: "500",
|
||||
color: theme?.colors?.typography,
|
||||
},
|
||||
apiStatusRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
},
|
||||
statusIndicatorDot: {
|
||||
height: 12,
|
||||
width: 12,
|
||||
borderRadius: 9999,
|
||||
},
|
||||
statusIndicatorGreen: {
|
||||
backgroundColor: theme.colors.success,
|
||||
},
|
||||
statusIndicatorRed: {
|
||||
backgroundColor: theme.colors.destructive,
|
||||
},
|
||||
mutedText: {
|
||||
color: theme?.colors?.typography,
|
||||
},
|
||||
privateDataCard: {
|
||||
marginBottom: 24,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: theme?.colors?.border,
|
||||
padding: 16,
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,134 @@
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
{{#if (eq api "trpc")}}
|
||||
import { queryClient } from "@/utils/trpc";
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
import { queryClient } from "@/utils/orpc";
|
||||
{{/if}}
|
||||
import { useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { StyleSheet } from "react-native-unistyles";
|
||||
|
||||
export function SignIn() {
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleLogin = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
await authClient.signIn.email(
|
||||
{
|
||||
email,
|
||||
password,
|
||||
},
|
||||
{
|
||||
onError: (error) => {
|
||||
setError(error.error?.message || "Failed to sign in");
|
||||
setIsLoading(false);
|
||||
},
|
||||
onSuccess: () => {
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
queryClient.refetchQueries();
|
||||
},
|
||||
onFinished: () => {
|
||||
setIsLoading(false);
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Sign In</Text>
|
||||
|
||||
{error && (
|
||||
<View style={styles.errorContainer}>
|
||||
<Text style={styles.errorText}>{error}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleLogin}
|
||||
disabled={isLoading}
|
||||
style={styles.button}
|
||||
>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.buttonText}>Sign In</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create((theme) => ({
|
||||
container: {
|
||||
marginTop: 24,
|
||||
padding: 16,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.colors.border,
|
||||
},
|
||||
title: {
|
||||
fontSize: 18,
|
||||
fontWeight: "600",
|
||||
color: theme.colors.typography,
|
||||
marginBottom: 16,
|
||||
},
|
||||
errorContainer: {
|
||||
marginBottom: 16,
|
||||
padding: 12,
|
||||
borderRadius: 6,
|
||||
},
|
||||
errorText: {
|
||||
color: theme.colors.destructive,
|
||||
fontSize: 14,
|
||||
},
|
||||
input: {
|
||||
marginBottom: 12,
|
||||
padding: 16,
|
||||
borderRadius: 6,
|
||||
color: theme.colors.typography,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.colors.border,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: theme.colors.primary,
|
||||
padding: 16,
|
||||
borderRadius: 6,
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
buttonText: {
|
||||
fontWeight: "500",
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,152 @@
|
||||
import { authClient } from "@/lib/auth-client";
|
||||
{{#if (eq api "trpc")}}
|
||||
import { queryClient } from "@/utils/trpc";
|
||||
{{/if}}
|
||||
{{#if (eq api "orpc")}}
|
||||
import { queryClient } from "@/utils/orpc";
|
||||
{{/if}}
|
||||
import { useState } from "react";
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from "react-native";
|
||||
import { StyleSheet } from "react-native-unistyles";
|
||||
|
||||
export function SignUp() {
|
||||
const [name, setName] = useState("");
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSignUp = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
await authClient.signUp.email(
|
||||
{
|
||||
name,
|
||||
email,
|
||||
password,
|
||||
},
|
||||
{
|
||||
onError: (error) => {
|
||||
setError(error.error?.message || "Failed to sign up");
|
||||
setIsLoading(false);
|
||||
},
|
||||
onSuccess: () => {
|
||||
setName("");
|
||||
setEmail("");
|
||||
setPassword("");
|
||||
queryClient.refetchQueries();
|
||||
},
|
||||
onFinished: () => {
|
||||
setIsLoading(false);
|
||||
},
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text style={styles.title}>Create Account</Text>
|
||||
|
||||
{error && (
|
||||
<View style={styles.errorContainer}>
|
||||
<Text style={styles.errorText}>{error}</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Name"
|
||||
value={name}
|
||||
onChangeText={setName}
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
style={styles.input}
|
||||
placeholder="Email"
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
keyboardType="email-address"
|
||||
autoCapitalize="none"
|
||||
/>
|
||||
|
||||
<TextInput
|
||||
style={styles.inputLast}
|
||||
placeholder="Password"
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry
|
||||
/>
|
||||
|
||||
<TouchableOpacity
|
||||
onPress={handleSignUp}
|
||||
disabled={isLoading}
|
||||
style={styles.button}
|
||||
>
|
||||
{isLoading ? (
|
||||
<ActivityIndicator size="small" color="#fff" />
|
||||
) : (
|
||||
<Text style={styles.buttonText}>Sign Up</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create((theme) => ({
|
||||
container: {
|
||||
marginTop: 24,
|
||||
padding: 16,
|
||||
borderRadius: 8,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.colors.border,
|
||||
},
|
||||
title: {
|
||||
fontSize: 18,
|
||||
fontWeight: "600",
|
||||
color: theme.colors.typography,
|
||||
marginBottom: 16,
|
||||
},
|
||||
errorContainer: {
|
||||
marginBottom: 16,
|
||||
padding: 12,
|
||||
borderRadius: 6,
|
||||
},
|
||||
errorText: {
|
||||
color: theme.colors.destructive,
|
||||
fontSize: 14,
|
||||
},
|
||||
input: {
|
||||
marginBottom: 12,
|
||||
padding: 16,
|
||||
borderRadius: 6,
|
||||
color: theme.colors.typography,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.colors.border,
|
||||
},
|
||||
inputLast: {
|
||||
marginBottom: 16,
|
||||
padding: 16,
|
||||
borderRadius: 6,
|
||||
color: theme.colors.typography,
|
||||
borderWidth: 1,
|
||||
borderColor: theme.colors.border,
|
||||
},
|
||||
button: {
|
||||
backgroundColor: theme.colors.primary,
|
||||
padding: 16,
|
||||
borderRadius: 6,
|
||||
flexDirection: "row",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
buttonText: {
|
||||
fontWeight: "500",
|
||||
},
|
||||
}));
|
||||
Reference in New Issue
Block a user