How to setup Clerk with EXPO for production?

[Kashan321]

Hey Simon Grimm, I'm learning react native from you. I've watched your videos while using Clerk for authentication. It's nice and easy to do for development.
But, now I've to push my app for production but setting up clerk for production specially for EXPO is quite complex. Also I'm new to EXPO and have never push app to production. Can you please help me with setting up Clerk with expo for production. It will be a great favor. Thanks you so much.

[phoenix-error]

+1
Trying but I cannot get it to work

[A-4-Atom]

@Kashan321
@phoenix-error
You'll first need to own a domain, then you setup the given DNS records, after that use the new API key. Now you can deploy the app to prod.

[sonukumar2]

@A-4-Atom Not working.

[A-4-Atom]

@sonukumar2 Hi, one thing I forgot to mention that you also have to enable native API and add your android/ios app. It should be under the name Native Applications in clerk settings.

[sonukumar2]

Hi @A-4-Atom , can you please help me? I am making an app using expo.dev and using clerk authentication.

I bought domain and acquired the Google OAuth credentials. Where I am doing wrong?

I have completed all steps for clerk Google OAuth give here: https://clerk.com/docs/deployments/deploy-expo and https://clerk.com/docs/authentication/social-connections/google .

login/index.jsx:

import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
import React from 'react'
import Colors from './../../constants/Colors'
import { Link, useRouter } from 'expo-router'
import { useOAuth, useUser, useAuth } from '@clerk/clerk-expo'
import * as Linking from 'expo-linking'
import * as WebBrowser from 'expo-web-browser'
import GlobalApi from '../../services/GlobalApi'
import { Svg, Path } from 'react-native-svg';


// Complete any pending auth sessions
WebBrowser.maybeCompleteAuthSession();

export const useWarmUpBrowser = () => {
  React.useEffect(() => {
    void WebBrowser.warmUpAsync()
    return () => {
      void WebBrowser.coolDownAsync()
    }
  }, [])
}

export default function LoginScreen() {
  useWarmUpBrowser();
  const { signOut } = useAuth();
  const { startOAuthFlow } = useOAuth({ strategy: 'oauth_google' });
  const { user } = useUser();
  const router = useRouter();

  // Check if user is already authenticated
  React.useEffect(() => {
    console.log("User auth check effect running");
    if (user) {
      console.log("User is already authenticated:", user.id);
      router.navigate('/(tabs)/home');
    }
  }, [user, router]);

  const onPress = React.useCallback(async () => {
    try {
      console.log("Starting OAuth flow...");
      
      // Generate the redirect URL - make sure scheme matches app.json

      const redirectUrl = __DEV__ 
  ? Linking.createURL('/', { scheme: 'myapp' }) 
  : 'myapp://';

      // const redirectUrl = Linking.createURL('/', { scheme: 'myapp' });
      // console.log("Redirect URL:", redirectUrl);
      
      const { createdSessionId, signIn, signUp, setActive } = await startOAuthFlow({
        redirectUrl,
      });
      
      console.log("OAuth flow completed with result:", { 
        hasSessionId: !!createdSessionId,
        hasSignIn: !!signIn,
        hasSignUp: !!signUp,
        hasSetActive: !!setActive 
      });
      
      if (createdSessionId) {
        console.log("Session created, activating...");
        if (setActive) {
          await setActive({ session: createdSessionId });
          console.log("Session activated, navigating...");
          // Try different navigation methods
          router.navigate('/(tabs)/home');
        }
      } else if (signIn) {
        console.log("Sign in flow needs to be completed");
        // Handle sign-in completion if needed
      } else if (signUp) {
        console.log("Sign up flow needs to be completed");
        // Handle sign-up completion if needed
      }
    } catch (err) {
      console.error('OAuth error:', err);
    }
  }, [startOAuthFlow, router]);

  const GoogleIcon = () => (
    <Svg width={20} height={20} viewBox="0 0 24 24">
      <Path
        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
        fill="#4285F4"
      />
      <Path
        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
        fill="#34A853"
      />
      <Path
        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
        fill="#FBBC05"
      />
      <Path
        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
        fill="#EA4335"
      />
    </Svg>
  );
  

  return (
    <View>
      <Image source={require('./../../assets/images/login.webp')}
        style={{
          width: '100%',
          height: 600
        }}
      />

      <View style={styles.loginContainer}>
        <Text style={{
          fontSize: 30,
          fontWeight: 'bold',
          textAlign: 'center'
        }}>Welcome to HiDream AI</Text>

        <Text style={{
          color: Colors.GRAY,
          textAlign: 'center',
          marginTop: 15
        }}>Create AI Art in Just one Click</Text>

<TouchableOpacity 
      onPress={onPress} 
      style={styles.button}
      activeOpacity={0.8}
    >
      <View style={styles.buttonContent}>
        <View style={styles.iconContainer}>
          <GoogleIcon />
        </View>
        <Text style={styles.buttonText}>Continue with Google</Text>
      </View>
    </TouchableOpacity>
  );

        <Text style={{
          textAlign: 'center',
          marginTop: 20,
          fontSize: 13,
          color: Colors.GRAY
        }}>By Continuing you agree to our terms and conditions</Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  loginContainer: {
    padding: 25,
    marginTop: -20,
    backgroundColor: 'white',
    height: 600,
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
  },
  button: {
    width: '100%',
    padding: 14,
    backgroundColor: 'white',
    borderRadius: 40,
    marginTop: 20,
    borderWidth: 1,
    borderColor: '#dadce0',
    elevation: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.2,
    shadowRadius: 1,
  },
  
  buttonContent: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },
  iconContainer: {
    marginRight: 10,
  },
  buttonText: {
    textAlign: 'center',
    color: '#757575',
    fontSize: 16,
    fontWeight: '500',
  }
});

app.json:

{
  "expo": {
    "name": "HiDream AI",
    "slug": "HiDream",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/images/icon.png",
    "scheme": "myapp",
    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.sonublaze24.hidream",
      "infoPlist": {
        "ITSAppUsesNonExemptEncryption": false
      }
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/images/icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.sonublaze24.demoapp"
    },
    "web": {
      "bundler": "metro",
      "output": "server",
      "favicon": "./assets/images/favicon.png"
    },
    "plugins": [
      "expo-router"
    ],
    "experiments": {
      "typedRoutes": true
    },
    "extra": {
      "paypalClientId": "AQMc55C0iv1IqkXLGT7-PnVVv_p3X0lpPjG1jvaF7s6pXZOphEK4jhm46e7H3IIDU69G7Nhy0vRFANOn",
      "router": {
        "origin": false
      },
      "eas": {
        "projectId": "30845583-f9f0-42d7-ad37-71a15609abd1"
      }
    }
  }
}

eas.json

{
    "build": {
      "preview": {
        "android": {
          "buildType": "apk"
        }
      },
     "development": {
      "ios": {
        "simulator": true
      }
    },
      "preview2": {
        "android": {
          "gradleCommand": ":app:assembleRelease"
        }
      },
      "preview3": {
        "developmentClient": true
      },
      "preview4": {
        "distribution": "internal"
      },
      "production": {}
    }
  }

After did npx eas build -p android --profile preview , while opening apk and clicked on Continue with Google button , nothing is happening.

Ask me for code or any ss

[A-4-Atom]

@sonukumar2 I'll look for a solution meanwhile try this. The given script will run in production mode and will show errors that might not be show up normally.

[Hari18102003]

@sonukumar2
Bro did you solve the issue?
I am currenlty facing this issue and cant find proper solution.
Please help me if you have solved.

@A-4-Atom
Did you find any solution?

[JamieBShaw]

I also have the same issue, using production keys, setup google auth, set up native app in clerk but i cannot use any clerks features in production - works perfectly in development