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,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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user