tangled
alpha
login
or
join now
teal.fm
/
teal
110
fork
atom
Your music, beautifully tracked. All yours. (coming soon)
teal.fm
teal-fm
atproto
110
fork
atom
overview
issues
pulls
pipelines
change branding to 'sign in with your PDS'
Natalie B
1 year ago
0f2c3ada
af94705b
+45
-27
2 changed files
expand all
collapse all
unified
split
app
auth
options.tsx
login.tsx
+1
-1
app/auth/options.tsx
···
34
34
}}
35
35
>
36
36
37
37
-
<Text>Sign in with Bluesky</Text>
37
37
+
<Text>Sign in with ATProto</Text>
38
38
</Button>
39
39
</Link>
40
40
<Link href="/signup" className="text-secondary">
+44
-26
app/login.tsx
···
11
11
import { Text } from "@/components/ui/text";
12
12
import { Button } from "@/components/ui/button";
13
13
import { Icon } from "@/lib/icons/iconWithClassName";
14
14
-
import { Check, ChevronRight, AtSign } from "lucide-react-native";
14
14
+
import { Check, ChevronRight, AtSign, AlertCircle } from "lucide-react-native";
15
15
import { Input } from "@/components/ui/input";
16
16
import { cn } from "@/lib/utils";
17
17
import { Link, Stack, router } from "expo-router";
···
23
23
24
24
const LoginScreen = () => {
25
25
const [handle, setHandle] = useState("");
26
26
+
const [err, setErr] = useState<string | undefined>();
26
27
const [isRedirecting, setIsRedirecting] = useState(false);
27
28
const [isLoading, setIsLoading] = useState(false);
28
29
···
30
31
31
32
const handleLogin = async () => {
32
33
if (!handle) {
33
33
-
Alert.alert("Error", "Please enter your handle");
34
34
+
setErr("Please enter a handle");
34
35
return;
35
36
}
36
37
37
38
setIsLoading(true);
38
39
39
39
-
let redirUrl = await getLoginUrl(handle.replace("@", ""));
40
40
-
if (!redirUrl) {
41
41
-
// TODO: better error handling lulw
42
42
-
Alert.alert("Error", "Failed to get login URL");
43
43
-
return;
44
44
-
}
45
45
-
if (Platform.OS === "web") {
46
46
-
// redirect to redir url page without authsession
47
47
-
// shyould! redirect to /auth/callback
48
48
-
router.navigate(redirUrl.toString());
49
49
-
50
50
-
} else {
51
51
-
const res = await openAuthSessionAsync(
52
52
-
redirUrl.toString(),
53
53
-
"http://127.0.0.1:8081/login"
54
54
-
);
55
55
-
if (res.type === "success") {
56
56
-
const params = new URLSearchParams(res.url.split("?")[1]);
57
57
-
await oauthCallback(params);
40
40
+
try {
41
41
+
let redirUrl = await getLoginUrl(handle.replace("@", ""));
42
42
+
if (!redirUrl) {
43
43
+
// TODO: better error handling lulw
44
44
+
throw new Error("Does not resolve to a DID");
58
45
}
46
46
+
setIsRedirecting(true);
47
47
+
if (Platform.OS === "web") {
48
48
+
// redirect to redir url page without authsession
49
49
+
// shyould! redirect to /auth/callback
50
50
+
router.navigate(redirUrl.toString());
51
51
+
} else {
52
52
+
const res = await openAuthSessionAsync(
53
53
+
redirUrl.toString(),
54
54
+
"http://127.0.0.1:8081/login"
55
55
+
);
56
56
+
if (res.type === "success") {
57
57
+
const params = new URLSearchParams(res.url.split("?")[1]);
58
58
+
await oauthCallback(params);
59
59
+
}
60
60
+
}
61
61
+
} catch (e: any) {
62
62
+
console.error(e);
63
63
+
setErr(e.message);
64
64
+
setIsLoading(false);
65
65
+
setIsRedirecting(false);
66
66
+
return;
59
67
}
60
68
61
69
// try {
···
107
115
};
108
116
109
117
return (
110
110
-
<SafeAreaView className="flex-1">
118
118
+
<SafeAreaView className="flex-1 flex items-center justify-center w-full">
111
119
<Stack.Screen
112
120
options={{
113
121
title: "Sign in",
···
115
123
headerShown: false,
116
124
}}
117
125
/>
118
118
-
<View className="flex-1 justify-center align-center p-8 gap-4 pb-32 max-w-screen-sm">
126
126
+
<View className="flex-1 justify-center align-center p-8 gap-4 pb-32 max-w-screen-sm min-w-full">
119
127
<View className="flex items-center">
120
128
<Icon icon={AtSign} className="color-bsky" name="at" size={64} />
121
129
</View>
122
130
<Text className="text-3xl font-semibold text-center text-foreground">
123
131
Sign in with your PDS
124
132
</Text>
125
125
-
<Text className="text-sm font-serif-old text-muted-foreground">
126
126
-
Status: {status}
127
127
-
</Text>
128
133
<View>
129
134
<Text className="text-sm text-muted-foreground">Handle</Text>
130
135
<Input
136
136
+
className={err && `border-red-500 border-2`}
131
137
placeholder="alice.bsky.social"
132
138
value={handle}
133
139
onChangeText={setHandle}
134
140
autoCapitalize="none"
135
141
autoCorrect={false}
136
142
/>
143
143
+
{err ? (
144
144
+
<Text className="text-red-500 justify-baseline mt-1 text-xs">
145
145
+
<Icon
146
146
+
icon={AlertCircle}
147
147
+
className="mr-1 inline -mt-0.5 text-xs"
148
148
+
size={20}
149
149
+
/>
150
150
+
{err}
151
151
+
</Text>
152
152
+
) : (
153
153
+
<View className="h-6" />
154
154
+
)}
137
155
</View>
138
156
<View className="flex flex-row justify-between items-center">
139
157
<Link href="https://bsky.app/signup">