CODEWITHSUNDEEP
reactjsreact-nativeclerk
Raghunadh
Raghunadh

Reputation: 3

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.

Upvotes: -1

Views: 348

Answers (3)

ruwanmadhusanka
ruwanmadhusanka

Reputation: 989

Thank you so much @dev_ire, I also was able to solve the issue after updating the expo-clerk version to the latest using the below command. (It was updated from ^0.18.10 to ^2.2.29)

npm install @clerk/clerk-expo@latest

Upvotes: 0

HEZRON NYAMBOGA
HEZRON NYAMBOGA

Reputation: 1

Based on the error message and stack trace you've provided, it appears you're encountering an issue with the Clerk integration in your React Native application using Expo. This error is specifically related to the ClerkProvider component.Install [email protected]

Upvotes: 0

dev_ire
dev_ire

Reputation: 52

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

Upvotes: 3

Related Questions