Как сохранить логин пользователя

Проблема в том, что я не могу оставить пользователя в системе со своим идентификатором пользователя для доступа к таблицам супабазы ​​для получения или публикации данных. У меня есть два навигатора: один для вошедших в систему пользователей и один для незарегистрированных пользователей (т. е. просто маршруты входа и регистрации). Я могу обойти экран входа в систему с помощью кода, но тогда в этом случае супабаза не распознает пользователя, поэтому не будет получать или публиковать какие-либо данные.

Я перепробовал все, что смог найти в Интернете. Я пробовал использовать поставщика контекста аутентификации, но это не имело никакого значения. Я перепробовал все советы по документации Supabase и руководствам по Supabase React. Это позволило мне обойти экран входа в систему и автоматически войти в систему, но на самом деле пользователь не вошел в систему. Я перепробовал все методы getSession() и getUser(), но они тоже не помогли. Я очень надеюсь, что кто-нибудь здесь сможет мне помочь, прежде чем я действительно сойду с ума!

Вот мой код для навигатора index.js (без всех закомментированных вещей, которые я пробовал!)

const AppNavigator = () => {
  const dispatch = useDispatch();
  const loggedIn = useSelector((state) => state.auth.loggedIn);


  useEffect(() => {
    const fetchAuthInfo = async () => {
      try {
        const token = await getFromAsyncStorage("AUTH_TOKEN");
        if (!token) {
          return dispatch(authActions.updateLoggedInState(false));
        } else {
          dispatch(authActions.updateLoggedInState(true));
        }
      } catch (error) {
        Toast.show("Oops, something went wrong!");
      }
    };
    fetchAuthInfo();
  }, []);



  return (
    <NavigationContainer>
      <Root.Navigator>
        {loggedIn ? (
          <Root.Screen
            name = "MainNavigator"
            component = {MainNavigator}
            options = {{ headerShown: false }}
          />
        ) : (
          <Root.Screen
            name = "AuthNavigator"
            component = {AuthNavigator}
            options = {{ headerShown: false }}
          />
        )}
        <Root.Screen
          name = "ForgotPassword"
          component = {ForgotPassword}
          options = {{ headerShown: false }}
        />
      </Root.Navigator>
    </NavigationContainer>
  );
};

А вот код моей страницы входа (ну, не JSX, я думаю, это нормально):

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const loggedIn = useSelector((state) => state.auth.loggedIn);
  const dispatch = useDispatch();

  const handleLogin = async () => {
    let { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });

    if (error) {
      Toast.show(error.message);
      console.info(error);
    }

    if (data.session) {
      await saveToAsyncStorage("AUTH_TOKEN", data.session.access_token);
      dispatch(authActions.updateLoggedInState(true));
      console.info("logged in", data.session.user.id);
    }
  };

Когда я вхожу в систему с помощью формы входа (когда я не использую код для обхода этого экрана), последняя строка (журнал консоли) работает и дает мне идентификатор пользователя, и все данные извлекаются и публикуются по желанию. Просто когда я использую код, чтобы пропустить процесс входа в систему, приложение понятия не имеет, кто вы.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
176
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Основная проблема, с которой вы столкнулись, заключается в том, что вы пытаетесь самостоятельно управлять токеном аутентификации, о чем Supabase SDK позаботится автоматически.

Инициализируйте Supabase, передав AsyncStorage из @react-native-async-storage, и вручную удалите весь код, в котором вы сохраняете токен доступа или любые токены в асинхронном хранилище, и все будет в порядке.

import 'react-native-url-polyfill/auto'
import AsyncStorage from '@react-native-async-storage/async-storage'
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL
const supabaseAnonKey = YOUR_REACT_NATIVE_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  auth: {
    storage: AsyncStorage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: false,
  },
})

Спасибо, это действительно полезно. Мне просто интересно, как это работает с разными навигаторами (в частности MainNavigator, AuthNavigator). Как проверить в навигационном index.jsx, прошел ли пользователь аутентификацию, чтобы решить, какой экран показывать? Я удалил весь код хранилища и теперь вообще не могу войти в симулятор!

Josie Jones 09.04.2024 12:54

@JosieJones Вы можете вызвать метод getSession(), чтобы узнать, существует сеанс или нет. Если сеанс существует, пользователь вошел в систему.

dshukertjr 09.04.2024 15:39

Другие вопросы по теме