Summary - Authentication

Combine context, JWT and protected routes to write an auth flow.

Summary - Authentication

In this group you learned auth context, login, JWT, protected routes and logout. AuthContext carries the central state; Provider exposes it to the whole app. Login updates the context with auth.login({ user, token }).

The token is written to SecureStore and sent with an Authorization: Bearer header on requests. Protected screens redirect to login with if (!user). Logout deletes the token and calls setUser(null). Now we will combine these into a working auth skeleton.

Exercise Summary - Auth provider skeleton

Complete the AuthProvider component. Define user state with useState(null). The login function should call setUser(data). Return an AuthContext.Provider with value={{ user, login }}.

Show example solution

import React, { createContext, useState } from 'react';

export const AuthContext = createContext(null);

export function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  function login(data) {
    setUser(data);
  }
  return (
    <AuthContext.Provider value={{ user, login }}>
      {children}
    </AuthContext.Provider>
  );
}

Exercise Summary - Full logout

Complete the logout function. Delete the token with await SecureStore.deleteItemAsync('token'). Reset the context with setUser(null). The function must be async.

Show example solution

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

export function makeFullLogout(setUser) {
  async function logout() {
    await SecureStore.deleteItemAsync('token');
    setUser(null);
  }
  return { logout };
}

Test yourself

Match the flow parts

createContext

Creates the AuthContext
login({ user, token })

Updates the context
Bearer ${token}

Authorization header
deleteItemAsync('token')

Deletes on logout

Write the Bearer header

headers: { Authorization: `Bearer ${____}` }

Show answer

headers: { Authorization: `Bearer ${token}` }

Next lesson: What is Redux?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies