Authentication & Secure Token Storage

What "authentication" really means

Authentication is just the app proving who the user is — the login step. The modern way works with a token: a long secret string the server gives your app after a correct email and password. Often it is a JWT (JSON Web Token — a compact, signed string that encodes who you are and when it expires). From then on, the app sends that token with each request as a badge that says "it is still me", instead of asking for the password again.

Picture a theme park: you show your ticket once at the gate (login), get a wristband (the token), and after that you just flash the wristband on each ride (each API request) — no need to buy a ticket every time.

Why NOT AsyncStorage for the token

You met AsyncStorage earlier for small data. It is perfect for a theme or a username — but it stores data unencrypted in plain text. A token is a key to the user’s account, so it must go somewhere encrypted that the operating system protects: the iOS Keychain and the Android Keystore. Expo wraps both in one module, expo-secure-store.

Install it (one-time):

npx expo install expo-secure-store

Step 1 — Log in and get a token

Logging in is a normal fetch that POSTs the email and password (POST means "send data to the server", unlike GET which only reads). The server checks them and replies with a token. Here we call a login endpoint and read the token out of the JSON:

async function login(email, password) {
  const res = await fetch('https://api.example.com/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ email, password }),
  });
  if (!res.ok) throw new Error('Wrong email or password');
  const data = await res.json();
  return data.token;   // the secret wristband
}

Step 2 — Save the token securely

Now store that token in the encrypted store. The API mirrors AsyncStorage — setItemAsync, getItemAsync, deleteItemAsync — but the value is protected by the OS:

import * as SecureStore from 'expo-secure-store';

// save after a successful login
await SecureStore.setItemAsync('userToken', token);

// read it back later (e.g. when the app reopens)
const token = await SecureStore.getItemAsync('userToken');

// delete it on logout
await SecureStore.deleteItemAsync('userToken');

Step 3 — Send the token on future requests

For pages that need a logged-in user (the profile, the cart), you attach the token to the request in an Authorization header — a standard place to put a credential. The format Bearer THE_TOKEN is the agreed convention:

async function getProfile() {
  const token = await SecureStore.getItemAsync('userToken');
  const res = await fetch('https://api.example.com/me', {
    headers: { Authorization: 'Bearer ' + token },
  });
  return res.json();
}

The whole login-to-logout flow, step by step

Tying it together, here is the full life of a session, in order:

1. The app opens and calls SecureStore.getItemAsync('userToken'). If it returns a token, the user is still logged in from last time; if null, show the login screen.
2. On the login screen the user types email and password and taps Log in, which calls our login function.
3. login POSTs the credentials. The server checks them and, if correct, returns a token; a wrong password throws an error you show to the user.
4. You save the token with SecureStore.setItemAsync('userToken', token) into the encrypted Keychain/Keystore, and (often) set a global user in your auth store so screens update.
5. For every protected request after that, you read the token and send it as Authorization: Bearer <token> so the server knows it is still the same user.
6. When the user taps Log out, you call SecureStore.deleteItemAsync('userToken') and clear the global user — the badge is gone, so the app returns to the login screen.