JWT авторизация в React Native Part 1 ⚡️

У одного из подписчиков возник вопрос, как работает JWT авторизация и как пользоваться ей в RN. 
Поэтому недолго думая, решил набросать пример и тут осветить этот момент.

Итак, погнали. Сначала немного теории (сорян, много). 

При входе пользователя, сервер создаёт токен JWT, содержащий закодированную информацию о пользователе и подпись для проверки подлинности (соль). Сервер возвращает пользователю Access Token и Refresh Token

Access Token короткоживущий токен, который используется для доступа, обычно время его "жизни" ограниченно. При каждом запросе к серверу, от юзера отправляется именно он для аутентификации

Refresh Token как следует из названия, используется для получения нового Access Token и имеет гораздо более длительное время жизни.

⚡️ReactNative и что-то остальное

JWT авторизация в React Native Part 2⚡️


Как обновляется токен?

1. Когда access token истекает, клиент отправляет refresh token на сервер для запроса нового access token

2. Сервер проверяет подлинность refresh token

3. Если refresh token действителен, сервер генерирует и возвращает новый access token (и, возможно, новый refresh token)

4. Клиент сохраняет новый access token (и refresh token, если был выдан новый)

В RN для хранения Access и Refresh токена пользователя можно использовать AsyncStorage, MMKV, Keychain или любые другие их аналоги.

Для лучшего понимания происходящего, набросал небольшой пример на Snack.
Используется какая-то моковая апиха по первой ссылке из гугла.

Тут всего два экрана: авторизация и главный. Но этого достаточно что бы понять суть происходящего.

Надеюсь вам было интересно и полезно)

ps/ скоро закину очередное голосование, stay tuned!

⚡️ReactNative и что-то остальное

Ребят, привет!

Я к вам с некоторыми новостями.

1. На днях получил аппрув от Apple и теперь у меня есть учетка разработчка 🤩

Это значит что теперь я смогу делиться проектами, приглашать к тестированию и публиковать готовые штуки в AppStore. Одно из приложения сейчас проходит ревью

2. Проснувшись сегодня утром, увидел что количество подписчиков на канале перевалило за 100 и офигел. От 0 до 100+ меньше чем за 5 месяцев, вау)

Спасибо всем кто есть, кто читает и комментирует, помогает и подсказывает 🎉

Будем расти и развиваться дальше!

⚡️ReactNative и что-то остальное

Всем новоприбывшим, у нас есть чатик, залетайте пообсуждать всякое 🙃

https://news.1rj.ru/str/+ZBdY2WKGczUwOTli

ура 🙃

#пятничный_мем

⚡️ReactNative и что-то остальное

Подписчики сообщают, что React Native IDE от Software Mansion доступна для всех!

Линк на VS маркетплэйс

Линк на репозиторий

⚡️ReactNative и что-то остальное

Ну и я наконец допилил свое приложение с календарем гонок F1, статистикой и результатами 🏎

пользователи iOS, велком ту бета-тестинг
https://testflight.apple.com/join/EsmJr3lh

⚡️ReactNative и что-то остальное

Всем привет!
В прошлый раз по результатам опроса, 2 место поделили темы:

- Настройка пушей в приложении
- Testing with Jest

А так как я больше ничего не придумал, давайте выберем из них)

Ну или как обычно, свое в комменты 🖖

Через пару часов завершу голосование, так что еще есть время повлиять на результаты 🤡

Ну что, у нас есть победитель!

Пойду разбираться с этим вопросом в рамках своего приложения как раз 🖖 Скоро будет пост

Всех с пятницей, господа! Всех отпускаю пить пиво 🍻

#пятничный_мем

⚡️ReactNative и что-то остальное

Всем привет!
Я совсем закопался в работу и в ближайшую неделю пропаду 🙃

Вы тут не скучайте, побольше отдыхайте, всех с пятничкой, всех обнял 🖖

ps/ по пушам статья в процессе, постараюсь выкатить как вернусь

#пятничный_мем

СЮ ДА Е ГО!

Сегодня релизнул приложение в AppStore!

https://apps.apple.com/us/app/planb-f1-data/id6503033841

Ревью прошло быстро, было лишь одно замечание по эпловым гайдлайнам (Guideline 4.2 - Design - Minimum Functionality) и после моего объяснения ушло в прод)

Спасибо всем, кто принимал участие в тестировании и делился фидбэком 🩷

Всех с пятницей! Сегодня без мема, но принес вам полезный контент, советую к просмотру 👇

https://youtu.be/d7WKMnhv_9E?si=0zOklD0qmUsF6TeW

⚡️ReactNative и что-то остальное

Шучу, вот вам мем

#пятничный_мем

⚡️ReactNative и что-то остальное

Внезапно!

📟 Push-уведомления и нотификации в RN и работа с ними

Начнем с того, в чем же отличия одного от другого. Честно говоря, до погружения в эту тему, я был уверен, что это одно и тоже)

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

Реализация push-уведомлений

Для реализации пушей, я нашел только 2 инструмента на текущий момент:

1. Firebase Cloud Messaging (FCM)

Наверное одно из самых популярных решений на текущий момент для работы с пушами.

Основные плюсы FCM:

Легкая интеграция с приложениями React Native.

Поддержка отправки сообщений с сервера через HTTP и XMPP протоколы.

Возможность сегментации пользователей для точечных уведомлений.

Ставиться просто, в доке все необходимое описано

npm install --save @react-native-firebase/app @react-native-firebase/messaging

2. OneSignal

У сервиса есть несколько вариантов платной подписки, но в бесплатном пакете есть то что нам нужно - Unlimited Mobile Push Sends 🤪

Я его еще не тестил, но вроде как там чуть лучше работает сегментирование, а еще есть поддержка Live Activities (Max 10,000 total push subscribers)

Интеграция OneSignal в React Native осуществляется с помощью библиотеки react-native-onesignal.

npm install react-native-onesignal

Реализация нотификаций

Для работы с локальными нотификациями по сути есть только один инструмент - Notifee, т.к React Native Push Notification уже года 3 не обновлялся

This repository is not actively maintained.

В Notifee есть возможность создавать уведомления по событию и выполнять, когда срабатывают какие-то триггеры

Для своего приложения я как раз использую Notifee, потому что нет отдельного сервера для отправки пушей, а нужно локально на событие генерировать увед и отправлять его.

Пока не понял, почему на эмуляторе ок работает, а на устройстве нет. Буду разбираться дальше)

Есть хотите какой-то из этих инструментов разобрать подробнее, пишите в комменты, сделаю отдельный проектик, соберу и выложу на GH 🖖

⚡️ReactNative и что-то остальное

Всем хороших выходных 🖖

#пятничный_мем

⚡️ReactNative и что-то остальное

Всем привет! Долго думал, писать сюда или нет, потому что для большинства это будет бесполезной информацией. Но это мой канал и делаю чего хочу ☺️

Мне сегодня 32. Всячески принимаю поздравления)