authstore null in react native

[apujayed]

const handleLogin = async() => {

    try {
      const authData = await pb.collection('users').authWithPassword(
        form.email,
        form.password,
        
    );

    } catch (error) {
      
    }
    // Dummy user credentials
    if (pb.authStore.isValid) {
      // Navigate to the home screen upon successful login
      navigation.navigate('Home');
    } else {
      // Display an alert for invalid credentials
      alert('Invalid email or password');
    }
  };  

I used this in the login component of a react native project, but when I navigate to the home screen, I don't get their authStore values.how to solve this issue?

[ganigeorgiev]

The above code is not enough to understand and pinpoint the cause of the issue.

How did you initialize the SDK?

Did you define a new store or you are using the default one?
If it is the default, note that it will keep the auth data only for the lifecycle of the pb value, aka. if your app is refreshed or a new SDK instance is created on navigation then the previous auth state will be lost because React Native doesn't have LocalStorage.

See the example how to load an AsyncAuthStore that is usually used with React Native in https://github.com/pocketbase/js-sdk#asyncauthstore.

If the above doesn't help, please elaborate a little more and/or provide a more detailed code sample showing how do you initialize the SDK and how do you perform the authStore check between navigation (eg. do you call pb.authStore.clear() somewhere?).

[apujayed]

import React, { useState,useEffect } from 'react';
import {
  StyleSheet,
  SafeAreaView,
  View,
  Image,
  Text,
  TouchableOpacity,
  TextInput,
} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { useNavigation } from '@react-navigation/native'; // Import navigation hook
import AsyncStorage from '@react-native-async-storage/async-storage';
import PocketBase, { AsyncAuthStore } from 'pocketbase';
export default function Example() {
  const navigation = useNavigation();



  const handleLogin = async() => {
    const store = new AsyncAuthStore({
      save: async (serialized) => AsyncStorage.setItem('pb_auth', serialized),
      initial: AsyncStorage.getItem('pb_auth'),
    });

    const pb = new PocketBase('https://serverurl.com', store);

    // Example usage:
    try {
      const authData = await pb.collection('users').authWithPassword('user321', '321user');
      console.log('Authentication successful:', authData);
      navigation.navigate('Home');
    } catch (error) {
      console.error('Authentication failed:', error);
    }

  };
  const [form, setForm] = useState({
    email: '',
    password: '',
  });
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#e8ecf4' }}>
      <View style={styles.container}>
        <KeyboardAwareScrollView>
          <View style={styles.header}>
            <Image
              alt="App Logo"
              resizeMode="contain"
              style={styles.headerImg}
              source={require('../../assets/icons/c0icon.jpg')} />

            <Text style={styles.title}>
              Sign in to <Text style={{ color: '#075eec' }}>Eat</Text>
            </Text>

            <Text style={styles.subtitle}>
            Delicious foods are waitting for you
            </Text>
          </View>

          <View style={styles.form}>
            <View style={styles.input}>
              <Text style={styles.inputLabel}>Username</Text>

              <TextInput
                autoCapitalize="none"
                autoCorrect={false}
       
                onChangeText={email => setForm({ ...form, email })}
                placeholder="john"
                placeholderTextColor="#6b7280"
                style={styles.inputControl}
                value={form.email} />
            </View>

            <View style={styles.input}>
              <Text style={styles.inputLabel}>Password</Text>

              <TextInput
                autoCorrect={false}
                onChangeText={password => setForm({ ...form, password })}
                placeholder="********"
                placeholderTextColor="#6b7280"
                style={styles.inputControl}
                secureTextEntry={true}
                value={form.password} />
            </View>

            <View style={styles.formAction}>
              <TouchableOpacity
                onPress={
                  handleLogin
                }>
                <View style={styles.btn}>
                  <Text style={styles.btnText}>Sign in</Text>
                </View>
              </TouchableOpacity>
            </View>

          
          </View>
        </KeyboardAwareScrollView>

        {/* <TouchableOpacity
          onPress={() => {
            // handle link
          }}
          style={{ marginTop: 'auto' }}>
          <Text style={styles.formFooter}>
            Don't have an account?{' '}
            <Text style={{ textDecorationLine: 'underline' }}>Sign up</Text>
          </Text>
        </TouchableOpacity> */}
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingVertical: 24,
    paddingHorizontal: 0,
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0,
  },
  title: {
    fontSize: 31,
    fontWeight: '700',
    color: '#1D2A32',
    marginBottom: 6,
  },
  subtitle: {
    fontSize: 15,
    fontWeight: '500',
    color: '#929292',
  },
  /** Header */
  header: {
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 36,
  },
  headerImg: {
    width: 80,
    height: 80,
    alignSelf: 'center',
    marginBottom: 36,
  },
  /** Form */
  form: {
    marginBottom: 24,
    paddingHorizontal: 24,
    flexGrow: 1,
    flexShrink: 1,
    flexBasis: 0,
  },
  formAction: {
    marginTop: 4,
    marginBottom: 16,
  },
  formLink: {
    fontSize: 16,
    fontWeight: '600',
    color: '#075eec',
    textAlign: 'center',
  },
  formFooter: {
    fontSize: 15,
    fontWeight: '600',
    color: '#222',
    textAlign: 'center',
    letterSpacing: 0.15,
  },
  /** Input */
  input: {
    marginBottom: 16,
  },
  inputLabel: {
    fontSize: 17,
    fontWeight: '600',
    color: '#222',
    marginBottom: 8,
  },
  inputControl: {
    height: 50,
    backgroundColor: '#fff',
    paddingHorizontal: 16,
    borderRadius: 12,
    fontSize: 15,
    fontWeight: '500',
    color: '#222',
    borderWidth: 1,
    borderColor: '#C9D3DB',
    borderStyle: 'solid',
  },
  /** Button */
  btn: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: 30,
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderWidth: 1,
    backgroundColor: '#075eec',
    borderColor: '#075eec',
  },
  btnText: {
    fontSize: 18,
    lineHeight: 26,
    fontWeight: '600',
    color: '#fff',
  },
});  

now how can i use this store to get data or get the authstore in another component?

Here Home Component:

import React from 'react';
import { View, Text, ScrollView, TouchableOpacity, Image, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useSelector, useDispatch } from 'react-redux';         
import { removeFromCart, clearCart, incrementQuantity, decrementQuantity } from '../Features/cartSlice';
import PocketBase from 'pocketbase'
const pb = new PocketBase('https://serverurl.com');
pb.autoCancellation(false)

console.log(pb.authStore.model);

getting null in console

[ganigeorgiev]

You are creating 2 different PocketBase instances, and the one in your Home component doesn't use the store defined in handleLogin.

Move the SDK initialization in a new js file (when using the JS SDK instance on the client-side it is safe to have a single global instance):

// src/pb.js

import AsyncStorage from '@react-native-async-storage/async-storage'
import PocketBase, { AsyncAuthStore } from 'pocketbase'

const store = new AsyncAuthStore({
  save:    async (serialized) => AsyncStorage.setItem('pb_auth', serialized),
  initial: AsyncStorage.getItem('pb_auth'),
})

const pb = new PocketBase('https://serverurl.com', store)

export default pb

And then you can simply import it your components:

import pb from 'src/pb.js'

// ...

If you are still not able to make it work try to create a minimal reproducible repo in https://snack.expo.dev/.

[apujayed]

Thanks its working now

[baltazar-gr]

I have a issue with pb.authStore.isValid in PocketBase v0.21.2 and Expo v51.

I can successfully log in using pb.collection('users').authWithPassword('username', 'password').
The login method returns the expected authentication data, including a valid token. but i have inconsistent with pb.authStore.isValid.

Despite a successful login, pb.authStore.isValid consistently returns false.
This prevents my app from reflecting the logged-in state and displaying the corresponding UI.

This is a reproducible example: https://snack.expo.dev/@b.guerrero/simple-pb-auth

[ganigeorgiev]

Hm, it seems that there is some issue with the token payload extraction on iOS and Android. It works correctly when testing on the Web env. I'll investigate it sometime later today.

[ganigeorgiev]

@baltazar-gr I've also just noticed that the issue seems to be reproduced only in Expo 51. It works correctly in Expo 50 for all platforms (Android, iOS, Web).

Either there is a bug or breaking change introduced with Expo 51. As mentioned earlier I'll investigate it sometime later today and if it can't be fixed from our end I'll open an issue against the Expo repo.

[ganigeorgiev]

@baltazar-gr I investigated it a little bit more in depth.

It seems that Expo 51 ships with React Native 0.74+ that comes with native atob implementation (it is used for decoding the token's base64 payload) but the problem is that its implementation is not 1:1 with the browser function and requires the base64 encoded string to have a padding, which in our case fails.

There is already an open issue for this in reactwg/react-native-releases#287 to merge the already applied fix from the hermes repo.

If the above ended up taking too long to merge we can apply a manual fix from our end but for now its better to wait the above to be released in the upstream.

In the meantime you can downgrade to Expo 50 or try to reference the fixed React Native branch.

[baltazar-gr]

Thanks a lot for investigating this further!

I completely agree that the best course of action is to wait for the fix to be released in React Native.
In the meantime, I'll follow your suggestion and wait for the updated release.

I appreciate your help with this!

[ganigeorgiev]

Since other users started reporting it, I've pushed a minor JS SDK v0.21.3 release that will temporary enforce the atob polyfill when using React Native. This should "fix" pb.authStore.isValid to report the correct value with the latest React Native version on Android and iOS.