Expo app in Production mode using clerk service for authentication

Question

I'm working with react native expo application. I'm using clerk for auth I have just complete my app and i have changed to apk format. But the login is not working. I am getting a blank screen, so I have changed the clerk config to production and added the new publishkey to my code.

But the config of clerk in production required the config of DNS.

But my app will be used locally, and I'm not going to deploy my app is not the case of web site so I don't understand the need of DNS Configuration

This is my package.json:

{
  "name": "app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@clerk/clerk-expo": "^0.20.8",
    "@expo/html-elements": "^0.9.1",
    "@react-native-picker/picker": "2.6.1",
    "@react-navigation/bottom-tabs": "^6.5.16",
    "@react-navigation/native": "^6.1.14",
    "@react-navigation/stack": "^6.3.28",
    "@types/react": "~18.2.45",
    "expo": "~50.0.15",
    "expo-barcode-scanner": "~12.9.3",
    "expo-camera": "~14.1.3",
    "expo-constants": "~15.4.6",
    "expo-image-picker": "~14.7.1",
    "expo-status-bar": "~1.11.1",
    "expo-updates": "~0.24.12",
    "expo-web-browser": "~12.8.2",
    "firebase": "^10.8.1",
    "formik": "^2.4.5",
    "moment": "^2.30.1",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-native": "0.73.6",
    "react-native-camera": "^4.2.1",
    "react-native-dotenv": "^3.4.11",
    "react-native-gesture-handler": "~2.14.0",
    "react-native-modal": "^13.0.1",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-table-component": "^1.2.2",
    "react-native-vector-icons": "^10.0.3",
    "typescript": "^5.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "tailwindcss": "^3.3.2"
  },
  "private": true
}

This is my app.js:

import { expo } from 'expo-constants'; // Import for environment variables

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
import LoginScreen from './Apps/Screens/LoginScreen';
import { ClerkProvider,SignedIn,SignedOut } from '@clerk/clerk-expo';
import { NavigationContainer } from '@react-navigation/native';
import TabNavigation from './Apps/Navigations/TabNavigation';
import * as Updates from 'expo-updates';

import { useEffect } from 'react';

export default function App() {

  return (
    <ClerkProvider publishableKey={"pk_live_12354796325825sc"}> 
    <View className="flex-1  bg-white">
    
      <StatusBar style="auto" />
      <SignedIn>
      <NavigationContainer> 
      <TabNavigation/>
      </NavigationContainer>
      </SignedIn>
      <SignedOut>
        <LoginScreen/>
        </SignedOut>

    </View>
    </ClerkProvider>
  );
}

And this is my TabNavigation:

import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from '../Screens/HomeScreen';
import ExploreScreen from '../Screens/ExploreScreen';
import AddPostScreen from '../Screens/AddPostScreen';
import ProfileScreen from '../Screens/ProfileScreen';
import { FontAwesome,Ionicons } from '@expo/vector-icons';
import HomeSreenStackNav from './HomeSreenStackNav';
import ProfileScreenStackNav from './ProfileScreenStackNav';
const Tab = createBottomTabNavigator();

const TabNavigation = () => {
    return (
       <Tab.Navigator screenOptions={{ 
        headerShown:false
       }}> 
        <Tab.Screen name='home-nav' component={HomeSreenStackNav}  
        options={{
            tabBarLabel:({color})=>(
                <Text style={{color:color,fontSize:12,marginBottom:3}}>Home</Text>
            ),
            tabBarIcon:({color,size})=>(
<FontAwesome name="home" size={size} color={color} />
            )
        }}
        />
        <Tab.Screen name='explore' component={ExploreScreen}
         options={{
            tabBarLabel:({color})=>(
                <Text style={{color:color,fontSize:12,marginBottom:3}}>Explore</Text>
            ),
            tabBarIcon:({color,size})=>(
<FontAwesome name="qrcode" size={size} color={color} />

            )
        }}
        
        />
        <Tab.Screen name='addpost' component={AddPostScreen}
         options={{
            tabBarLabel:({color})=>(
                <Text style={{color:color,fontSize:12,marginBottom:3}}>Add Post</Text>
            ),
            tabBarIcon:({color,size})=>(
<FontAwesome name="camera" size={size} color={color} />
            )
        }}
        />
        <Tab.Screen name='profile' component={ProfileScreenStackNav} 

        options={{
            tabBarLabel:({color})=>(
                <Text style={{color:color,fontSize:12,marginBottom:3}}>Profile</Text>
            ),
            tabBarIcon:({color,size})=>(
<Ionicons name="person-circle" size={size} color={color} />
            )
        }} 
        />
       </Tab.Navigator>
    );
}

//const styles = StyleSheet.create({})

export default TabNavigation;

this is the clerk config:

• 
• 

the app works perfectly in development; the problem occurs when I migrate to production:

eas login
eas build:configure
eas build -p  android

After this step, I get an .abb file and then use a python script to change it to .apk format. The first screen it shows correctly but the login button is not working"

WARN [Error: ClerkJS: Network error at "https://clerk.dns-dynamic.net/v1/client/sign_ins?_clerk_js_version=4.70.3&_is_native=1" - TypeError: Network request failed. Please try again.]
ERROR OAuth error [TypeError: Cannot read property 'toString' of null]

Answer 1

You have to go to your DNS, i.e., namescheap, goddaddy, etc. and select CNAME then enter the values Clerk provides for each, e.g., clerk -> frontend-api.clerk.services.