working on sdk 52

.gitignore

@@ -9,6 +9,9 @@ npm-debug.*
 *.mobileprovision
 *.orig.*
 web-build/
+ios/
+android/
+.env
 
 # macOS
 .DS_Store

app.json

@@ -7,7 +7,11 @@
     "name": "clerkApp",
     "slug": "clerkApp",
     "plugins": [
-      "expo-router"
-    ]
+      "expo-router",
+      "expo-secure-store"
+    ],
+    "ios": {
+      "bundleIdentifier": "com.anonymous.clerkApp"
+    }
   }
 }

app/(auth)/profile.tsx

@@ -1,52 +1,70 @@
-import { View, Text, Button, TextInput, StyleSheet } from 'react-native';
-import { useState } from 'react';
-import { useUser } from '@clerk/clerk-expo';
+import { View, Text, Button, TextInput, StyleSheet } from "react-native";
+import { useState } from "react";
+import { useUser } from "@clerk/clerk-expo";
 
 const Profile = () => {
   const { user } = useUser();
-  const [firstName, setFirstName] = useState(user.firstName);
-  const [lastName, setLastName] = useState(user.lastName);
+  const [firstName, setFirstName] = useState(user?.firstName ?? "");
+  const [lastName, setLastName] = useState(user?.lastName ?? "");
 
   const onSaveUser = async () => {
     try {
-      // This is not working!
-      const result = await user.update({
-        firstName: 'John',
-        lastName: 'Doe',
+      await user.update({
+        firstName,
+        lastName,
       });
-      console.log('🚀 ~ file: profile.tsx:16 ~ onSaveUser ~ result:', result);
-    } catch (e) {
-      console.log('🚀 ~ file: profile.tsx:18 ~ onSaveUser ~ e', JSON.stringify(e));
+    } catch (e: any) {
+      alert(e.errors[0].message);
     }
   };
 
   return (
     <View style={styles.container}>
-      <Text style={{ textAlign: 'center' }}>
-        Good morning {user.firstName} {user.lastName}!
+      <Text style={{ textAlign: "center" }}>
+        Good morning {user?.firstName} {user?.lastName}!
       </Text>
 
-      <TextInput placeholder="First Name" value={firstName} onChangeText={setFirstName} style={styles.inputField} />
-      <TextInput placeholder="Last Name" value={lastName} onChangeText={setLastName} style={styles.inputField} />
-      <Button onPress={onSaveUser} title="Update account" color={'#6c47ff'}></Button>
+      <TextInput
+        placeholder="First Name"
+        value={firstName}
+        onChangeText={setFirstName}
+        style={styles.inputField}
+        autoCapitalize="words"
+        autoComplete="name-given"
+        autoCorrect={false}
+        keyboardType="default"
+        returnKeyType="next"
+      />
+      <TextInput
+        placeholder="Last Name"
+        value={lastName}
+        onChangeText={setLastName}
+        style={styles.inputField}
+        autoCapitalize="words"
+        autoComplete="name-family"
+        autoCorrect={false}
+        keyboardType="default"
+        returnKeyType="done"
+      />
+      <Button onPress={onSaveUser} title="Update account" color={"#6c47ff"} />
     </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
     padding: 40,
   },
   inputField: {
     marginVertical: 4,
     height: 50,
     borderWidth: 1,
-    borderColor: '#6c47ff',
+    borderColor: "#6c47ff",
     borderRadius: 4,
     padding: 10,
-    backgroundColor: '#fff',
+    backgroundColor: "#fff",
   },
 });
 

app/(public)/login.tsx

@@ -1,44 +1,91 @@
-import { useSignIn } from '@clerk/clerk-expo';
-import { Link } from 'expo-router';
-import React, { useState } from 'react';
-import { View, StyleSheet, TextInput, Button, Pressable, Text, Alert } from 'react-native';
-import Spinner from 'react-native-loading-spinner-overlay';
+import { useSignIn } from "@clerk/clerk-expo";
+import { Link } from "expo-router";
+import React, { useState } from "react";
+import {
+  View,
+  StyleSheet,
+  TextInput,
+  Button,
+  Pressable,
+  Text,
+  Alert,
+  ActivityIndicator,
+} from "react-native";
 
 const Login = () => {
   const { signIn, setActive, isLoaded } = useSignIn();
 
-  const [emailAddress, setEmailAddress] = useState('');
-  const [password, setPassword] = useState('');
+  const [emailAddress, setEmailAddress] = useState("");
+  const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
 
   const onSignInPress = async () => {
     if (!isLoaded) {
       return;
     }
-    setLoading(true);
+
     try {
+      setLoading(true);
       const completeSignIn = await signIn.create({
         identifier: emailAddress,
         password,
       });
 
-      // This indicates the user is signed in
-      await setActive({ session: completeSignIn.createdSessionId });
+      if (completeSignIn.status === "complete") {
+        await setActive({ session: completeSignIn.createdSessionId });
+      } else {
+        console.log("Sign in status:", completeSignIn.status);
+      }
     } catch (err: any) {
       alert(err.errors[0].message);
     } finally {
       setLoading(false);
     }
   };
 
+  // Don't render the form until Clerk is loaded
+  if (!isLoaded) {
+    return (
+      <View style={[styles.container, styles.spinnerContainer]}>
+        <ActivityIndicator size="large" color="#6c47ff" />
+      </View>
+    );
+  }
+
   return (
     <View style={styles.container}>
-      <Spinner visible={loading} />
+      {loading && (
+        <View style={styles.spinnerContainer}>
+          <ActivityIndicator size="large" color="#6c47ff" />
+        </View>
+      )}
 
-      <TextInput autoCapitalize="none" placeholder="[email protected]" value={emailAddress} onChangeText={setEmailAddress} style={styles.inputField} />
-      <TextInput placeholder="password" value={password} onChangeText={setPassword} secureTextEntry style={styles.inputField} />
+      <TextInput
+        autoCapitalize="none"
+        placeholder="[email protected]"
+        value={emailAddress}
+        onChangeText={setEmailAddress}
+        style={styles.inputField}
+        keyboardType="email-address"
+        autoComplete="email"
+        autoCorrect={false}
+        returnKeyType="next"
+        textContentType="emailAddress"
+      />
+      <TextInput
+        placeholder="password"
+        value={password}
+        onChangeText={setPassword}
+        secureTextEntry
+        style={styles.inputField}
+        autoCapitalize="none"
+        autoComplete="password"
+        autoCorrect={false}
+        returnKeyType="done"
+        textContentType="password"
+      />
 
-      <Button onPress={onSignInPress} title="Login" color={'#6c47ff'}></Button>
+      <Button onPress={onSignInPress} title="Login" color={"#6c47ff"} />
 
       <Link href="/reset" asChild>
         <Pressable style={styles.button}>
@@ -57,21 +104,31 @@ const Login = () => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: "center",
     padding: 20,
   },
   inputField: {
     marginVertical: 4,
     height: 50,
     borderWidth: 1,
-    borderColor: '#6c47ff',
+    borderColor: "#6c47ff",
     borderRadius: 4,
     padding: 10,
-    backgroundColor: '#fff',
+    backgroundColor: "#fff",
   },
   button: {
     margin: 8,
-    alignItems: 'center',
+    alignItems: "center",
+  },
+  spinnerContainer: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.5)",
   },
 });