[SOLVED] React Native: Clerk authentication Error: Not a valid base64 encoded string length

React Native: Clerk authentication Error: Not a valid base64 encoded string length

I don't know why iam getting this error while iam opening my react native expo app, it was spitting an error like : Error: Not a valid base64 encoded string length

This error is located at: in ClerkProvider (created by RootLayout) in RootLayout...

my _layout.js for setting up clerk:

import React, { useEffect } from "react";
import { SplashScreen, Stack, useRouter, useSegments } from "expo-router";
import { useFonts } from "expo-font";
import { ClerkProvider, useAuth } from "@clerk/clerk-expo";
import * as SecureStore from "expo-secure-store";
import Toast from "react-native-toast-message";
import { TouchableOpacity } from "react-native";
import { Ionicons } from "@expo/vector-icons";
SplashScreen.preventAutoHideAsync();
const RootLayout = () => {
  const [fontsLoaded, error] = useFonts({
    "Poppins-Black": require("../assets/fonts/Poppins-Black.ttf"),
    "Poppins-Bold": require("../assets/fonts/Poppins-Bold.ttf"),
    "Poppins-ExtraBold": require("../assets/fonts/Poppins-ExtraBold.ttf"),
    "Poppins-ExtraLight": require("../assets/fonts/Poppins-ExtraLight.ttf"),
    "Poppins-Light": require("../assets/fonts/Poppins-Light.ttf"),
    "Poppins-Medium": require("../assets/fonts/Poppins-Medium.ttf"),
    "Poppins-Regular": require("../assets/fonts/Poppins-Regular.ttf"),
    "Poppins-SemiBold": require("../assets/fonts/Poppins-SemiBold.ttf"),
    "Poppins-Thin": require("../assets/fonts/Poppins-Thin.ttf"),
  });
  useEffect(() => {
    if (error) throw error;

    if (fontsLoaded) {
      SplashScreen.hideAsync();
    }
  }, [fontsLoaded, error]);

  if (!fontsLoaded && !error) {
    return null;
  }
  const tokenCache = {
    async getToken(key) {
      try {
        return SecureStore.getItemAsync(key);
      } catch (err) {
        return null;
      }
    },
    async saveToken(key, value) {
      try {
        return SecureStore.setItemAsync(key, value);
      } catch (err) {
        return;
      }
    },
  };
  const EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY =
    process.env.EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY;
  const InitialLayout = () => {
    const { isLoaded, isSignedIn } = useAuth();
    const segments = useSegments();
    const router = useRouter();

    useEffect(() => {
      console.log("IsSignedIn", isSignedIn);

      if (isLoaded && !isSignedIn) {
        router.push("/(modals)/login");
      }
    }, [isLoaded]);
    return (
      <Stack>
        <Stack.Screen name="index" options={{ headerShown: false }} />
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen
          name="(modals)/login"
          options={{
            presentation: "modal",
            title: "Log in or Sign up",
            headerTitleAlign: "center",
            headerTitleStyle: {
              fontFamily: "Poppins-Bold",
            },

            headerLeft: () => (
              <TouchableOpacity
                onPress={() => {
                  router.back();
                }}
              >
                <Ionicons name="close-outline" size={28} />
              </TouchableOpacity>
            ),
          }}
        />
        <Stack.Screen
          name="(modals)/search"
          options={{
            presentation: "modal",
            title: "Search input goes here...",
            headerTitleAlign: "center",
            headerTitleStyle: {
              fontFamily: "Poppins-Bold",
            },
            headerLeft: () => (
              <TouchableOpacity
                onPress={() => {
                  router.back();
                }}
              >
                <Ionicons name="close-outline" size={28} />
              </TouchableOpacity>
            ),
          }}
        />
      </Stack>
    );
  };
  return (
    <ClerkProvider
      publishableKey={EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY}
      tokenCache={tokenCache}
    >
      <InitialLayout />
      <Toast />
    </ClerkProvider>
  );
};

export default RootLayout;

my package.json:

{
  "name": "hair-oil-app",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@clerk/clerk-expo": "^1.0.0",
    "@types/react": "~18.2.45",
    "axios": "^1.7.2",
    "date-fns": "^3.6.0",
    "expo": "^51.0.7",
    "expo-constants": "^16.0.1",
    "expo-linking": "^6.3.1",
    "expo-router": "^3.5.14",
    "expo-secure-store": "^13.0.1",
    "expo-status-bar": "^1.12.1",
    "mongoose": "^8.3.2",
    "nativewind": "^2.0.11",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "^0.74.1",
    "react-native-element-dropdown": "^2.12.0",
    "react-native-gesture-handler": "^2.16.2",
    "react-native-loading-spinner-overlay": "^3.0.1",
    "react-native-pager-view": "^6.3.0",
    "react-native-ratings": "^8.1.0",
    "react-native-reanimated": "^3.10.1",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "^3.31.1",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-star-rating-widget": "^1.7.3",
    "react-native-toast-message": "^2.2.0",
    "react-native-web": "~0.19.6",
    "tailwind-rn": "^4.2.0",
    "zustand": "^4.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "tailwindcss": "^3.3.2"
  },
  "private": true
}

SINCE IAM NEWBIE, IF YOU THINK THIS IS STUPID, PLEASE LEAVE IT, AND THANK YOU.

I wanna to get rid of this stupid error, since iam dealing with it from 1 week. please.

Solution

The solution is to upgrade to a newer version of Clerk. That's what worked for me.