Setting Up Clerk Authentication for React Native / Expo

Clerk is a powerful authentication and user management solution that can be easily integrated into your React Native or Expo project. In this guide, we'll walk through the steps to set up Clerk authentication in a React Native / Expo project and use NativeWind for styling.

Prerequisites

Before we begin, ensure you have the following installed:

• Node.js (v20 or later)
• Expo CLI (npm install -g expo-cli)
• A Clerk account (sign up at Clerk)

Step 1: Create a New Expo Project

First, let's create a new Expo project if you don't already have one.

npx create-expo-app@latest ClerkAppDemo
cd ClerkAppDemo

Choose the "blank" template when prompted.

Step 2: Install Required Dependencies

Next, install the necessary dependencies for Clerk, React Navigation, and NativeWind.

npm install @clerk/clerk-expo @react-navigation/native @react-navigation/stack react-native-screens react-native-safe-area-context nativewind

If you're using Expo, you'll also need to install the following:

expo install expo-router expo-font expo-asset

Step 3: Set Up NativeWind

NativeWind allows you to use Tailwind CSS-like syntax for styling in React Native. To set it up, follow these steps:

Create a tailwind.config.js file in the root of your project:

module.exports = {
  content: [
    './App.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './screens/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Create a babel.config.js file if it doesn't already exist, and add the NativeWind plugin:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['nativewind/babel'],
  };
};

Restart your Expo development server to apply the changes.

Step 4: Set Up Clerk

Create a new application in the Clerk dashboard and get your publishableKey.

Initialize Clerk in your project. Open App.js and add the following code:

import React from 'react';
import { ClerkProvider, SignedIn, SignedOut } from '@clerk/clerk-expo';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, View } from 'react-native';

const Stack = createStackNavigator();

const HomeScreen = () => (
  <View className="flex-1 justify-center items-center">
    <Text className="text-2xl font-bold">Welcome to the App!</Text>
  </View>
);

const SignInScreen = () => (
  <View className="flex-1 justify-center items-center">
    <Text className="text-2xl font-bold">Please Sign In</Text>
  </View>
);

export default function App() {
  return (
    <ClerkProvider publishableKey="your-publishable-key">
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="SignIn" component={SignInScreen} />
          <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </ClerkProvider>
  );
}

Replace "your-publishable-key" with your actual Clerk publishable key.

Handle Authentication State using Clerk's SignedIn and SignedOut components. Modify the App component as follows:

export default function App() {
  return (
    <ClerkProvider publishableKey="your-publishable-key">
      <NavigationContainer>
        <Stack.Navigator>
          <SignedOut>
            <Stack.Screen name="SignIn" component={SignInScreen} />
          </SignedOut>
          <SignedIn>
            <Stack.Screen name="Home" component={HomeScreen} />
          </SignedIn>
        </Stack.Navigator>
      </NavigationContainer>
    </ClerkProvider>
  );
}

Step 5: Add Authentication Screens

Create a Sign-In Screen using Clerk's SignIn component. Update the SignInScreen component:

import { SignIn } from '@clerk/clerk-expo';

const SignInScreen = () => (
  <View className="flex-1 justify-center items-center">
    <SignIn />
  </View>
);

Create a Sign-Up Screen similarly:

import { SignUp } from '@clerk/clerk-expo';

const SignUpScreen = () => (
  <View className="flex-1 justify-center items-center">
    <SignUp />
  </View>
);

Update the Navigation Stack to include both screens:

<Stack.Navigator>
  <SignedOut>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </SignedOut>
  <SignedIn>
    <Stack.Screen name="Home" component={HomeScreen} />
  </SignedIn>
</Stack.Navigator>

Step 6: Run the Project

Finally, run your project to see Clerk authentication in action:

expo start

Scan the QR code with the Expo Go app on your mobile device, and you should see the authentication flow working with NativeWind styling applied.

Conclusion

You've successfully set up Clerk authentication in a React Native / Expo project and styled it using NativeWind. This setup provides a seamless authentication experience with modern, responsive styling. From here, you can further customize the UI and add more features to your app. Happy coding! 🙂