Przechowywanie kluczy w React Native – najprostszy sposób
💡

Przechowywanie kluczy w React Native – najprostszy sposób

Istnieje najprostszy sposób na przechowywanie kluczy w React Native. To istotny punkt do uwzględnienia przy tworzeniu każdej aplikacji. Twoje klucze dostępowe muszą być bezpieczne.

Jakich kluczy potrzebuję w React Native?

Wyobraź sobie bardzo popularny scenariusz architektury aplikacji mobilnej, w tym przypadku chodzi o implementację w React Native. Klient mobilny komunikujący się z bazą Firestore w ramach usługi Firebase, przechowujący pliki użytkownika w Firebase Storage i używający interfejsu API za pomocą Firebase Functions. Dodajmy może jeszcze do tego jakieś usługi Amazon Web Services, powiedzmy, że to zamiana tekstu na mowę, która odbywa się za pomocą kombinacji usług AWS Lambda, AWS S3, AWS Poli, a może jeszcze ta aplikacja ma jakiś ekran obsługujący Google Maps.

Żeby sprawnie komunikować się z tymi wszystkimi usługami i efektywnie z nich korzystać, do warstwy React Native powinny być przekazywane następujące parametry w zależności do sposobu łączenia się z usługami i konfiguracji:

  • Firebase API key
  • Firebase Realtime Database
  • Firebase Storage Bucket
  • Główny endpoint dla Firebase Functions
  • AWS Bucket
  • AWS API Gateway Endpoint
  • AWS Secret Key
  • AWS API Key
  • Google Maps Key

Dużo tych wszystkich secretsów no nie?

W pierwszej kolejności warto pamiętać, że umieszczenie tych kluczy w pliku .js i wypchnięcie do repozytorium, a następnie importowanie ich w kodzie, to bardzo zły pomysł, nawet jeśli to repozytorium jest prywatne.

Realny przykład

Oto historia, którą spotkałem w jednym z projektów. Ktoś, kilka lat wstecz nieopatrznie wypchnął w swoim kodzie klucz AWS. Developer ten w międzyczasie opuścił zespół, a błędu nikt nie zauważył. Niestety klucze te w jakiś sposób dostały się w ręce jakiegoś złośliwego człowieka. Dla tych, którzy nie znają AWS dodam, że posiadając klucze można dowolnie tworzyć, usuwać i edytować zasoby, chociażby za pomocą CLI. I to właśnie miało miejsce w tym przypadku. Troll stworzył kilkadziesiąt wirtualnych maszyn w różnych regionach, a że były to regiony, w których pracowaliśmy początkowo nikt tego nie zauważył, aż do momentu zapłaty billingu, który nagle wzrósł o 4000% (cztery tysiące procent serio!). Początkowe przypuszczenie było takie, że to nasze rozwiązanie w chmurze jest nieoptymalne i naciąga taką dużą kwotę. Zanim znaleźliśmy właściwą przyczynę, mój ówczesny pracodawca musiał zapłacić trzy takie rachunki. Niech to zatem służy jako przestroga i lesson learned.

React Native Dotenv

W celu uniknięcia podobnej sytuacji przy okazji tworzenia aplikacji w React Native przychodzi nam z pomocą biblioteka react-native-dotenv, którą osobiście bardzo lubię i rekomenduję ze względu na wygodę i prostotę użycia.

Wystarczy stworzyć w katalogu aplikacji plik .env i dodać go do .gitignore. Do .env wrzucamy nasze sekretne klucze i w odpowiednim miejscu w aplikacji importujemy je jako stałe z react-native-dotenv i używamy w kodzie do inicjowania połączeń.

.env

image

anyFileInYourProject.js

image

Przechowywanie kluczy w React Native jest banalne. Implementacja zajmuje zaledwie chwilę.

super-embed:<iframe id="mailingr" frameBorder="0" src="https://mailingr.co/embed/prod_KV05Pc6i5dUsWV"></iframe>
<script src="https://mailingr.co/mailingr-1.0.min.js"></script>