Cathy Lai

Posted on Jan 21

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

#reactnative #mobile #clerk #oauth

Recap

From the last session, we implemented the login.tsx. Now we will write the logout function in our protected.tsx page.

app/
├── (auth)/
│   └── login.tsx       <--- done in Step 5
├── (protected)/
│   └── protected.tsx   <--- this tutorial
├── _layout.tsx         <--- done in Step 4 
└── index.tsx

We use the signOut() function from Clerk SDK

protected.tsx

const { signOut } = useAuth();
const router = useRouter();

const handleLogout = async () => {
    try {
        await signOut();
        router.replace("/");
    } catch (error) {
        console.error("Logout error:", error);
    }
};

And then attach it to the Logout button:
(stylesheet omitted)

<Text>Protected</Text>

<Text>If you can see this, guard passed.</Text>

<TouchableOpacity
    onPress={handleLogout} >    
    <Text> Logout </Text>
</TouchableOpacity>

Here's the app!

Series Reference

Part	Title	Focus
Intro	Introduction	Introduction
Part 1	Install	Packages installation
Part 2	Clerk Dashboard	Creating the Clerk Project
Part 3	API Key	Adding Clerk API Keys
Part 4	Google Cloud Console	Google Cloud Console
Part 5	Expo Router Guard	App Structure & Routing
Part 6	Login (source code)	Login implementation (Clerk SDK)
Part 7	Logout (source code)	Logout and app demo video

Checkout it out on GitHub!

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.

Coffee

Only if you insist :)

Top comments (2)

Bhavin Sheth • Jan 21

I like how clean and straightforward this logout flow is — no extra abstractions, just signOut() and a clear redirect. That’s exactly what people want when they’re implementing auth for real apps, especially on mobile where edge cases can get messy fast.

The step-by-step progression across the series (Clerk setup → routing → login → logout) makes it very easy to follow and actually apply. This feels practical, not theoretical.

Looking forward to the upcoming posts about how you used AI tools to debug and improve the app — that “how I solved it” angle is always super valuable for others building production React Native apps.

Cathy Lai • Jan 22

Thank you — I really appreciate this perspective.

That was exactly the intention: keeping the logout flow as simple and explicit as possible so it’s easy to reason about. I’ve definitely learned the hard way that extra abstraction around auth often hurts more than it helps in real apps.

Glad the step-by-step structure landed as practical rather than theoretical — I wanted each part of the series to be something people could read in one sitting and understand immediately.

And yes, I’ll definitely be sharing more on the AI/debugging side and the “how I solved it” decisions along the way. That problem-solving context is where most of the real learning happens. Thanks for the encouragement!

DEV Community