Tools: Login with Google on an iPhone (Local Metro server + Dev Build) - Part 7/7: Logout

Here's the result! ## Series Reference ## Checkout it out on GitHub! ## Coffee...? From the last session, we implemented the login.tsx. Now we will write the logout function. Now we will write the logout function in our protected.tsx page. We use the signOut() function from Clerk SDK And then attach it to the Logout button: (stylesheet omitted) See the full source code at OAuth Prototype Comments and suggestions welcome! I plan to share more on how I used AI tools to solve issues, improve myself, including tips and tricks I've learnt. :) And then, create further tutorials on working with production apps. Only if you insist :) Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: app/ ├── (auth)/ │ └── login.tsx <--- done in Step 5 ├── (protected)/ │ └── protected.tsx <--- this tutorial ├── _layout.tsx <--- done in Step 4 └── index.tsx Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: app/ ├── (auth)/ │ └── login.tsx <--- done in Step 5 ├── (protected)/ │ └── protected.tsx <--- this tutorial ├── _layout.tsx <--- done in Step 4 └── index.tsx CODE_BLOCK: app/ ├── (auth)/ │ └── login.tsx <--- done in Step 5 ├── (protected)/ │ └── protected.tsx <--- this tutorial ├── _layout.tsx <--- done in Step 4 └── index.tsx COMMAND_BLOCK: protected.tsx const { signOut } = useAuth(); const router = useRouter(); const handleLogout = async () => { try { await signOut(); router.replace("/"); } catch (error) { console.error("Logout error:", error); } }; Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: protected.tsx const { signOut } = useAuth(); const router = useRouter(); const handleLogout = async () => { try { await signOut(); router.replace("/"); } catch (error) { console.error("Logout error:", error); } }; COMMAND_BLOCK: protected.tsx const { signOut } = useAuth(); const router = useRouter(); const handleLogout = async () => { try { await signOut(); router.replace("/"); } catch (error) { console.error("Logout error:", error); } }; COMMAND_BLOCK: <Text>Protected</Text> <Text>If you can see this, guard passed.</Text> <TouchableOpacity onPress={handleLogout} > <Text> Logout </Text> </TouchableOpacity> Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: <Text>Protected</Text> <Text>If you can see this, guard passed.</Text> <TouchableOpacity onPress={handleLogout} > <Text> Logout </Text> </TouchableOpacity> COMMAND_BLOCK: <Text>Protected</Text> <Text>If you can see this, guard passed.</Text> <TouchableOpacity onPress={handleLogout} > <Text> Logout </Text> </TouchableOpacity>