git show 674df4d 2 / 18

React Native Sanctum

Sign-in with Laravel Sanctum for React Native apps. The library keeps the token in Expo SecureStore.

branch: open-source
type: Open source,React Native
stack: React Native,Laravel Sanctum
remote: github.com/Tschucki/react-native-laravel-sanctum
stars: ★ 22
npm: 304 downloads in 12 months as of 28.10.2026
ci: ci.yml
license: MIT
commit: 674df4d

README.md

Authentication with Laravel Sanctum

This package connects a Laravel Sanctum backend to a React Native app. It provides functions for signing in, signing out, accessing the current user and checking authentication state.

Using it in an app

An AuthProvider wraps the application. Components access authentication functions and user state through useAuth.

tsx

import { AuthProvider, useAuth } from 'react-native-laravel-sanctum';

API endpoints are configured in the provider. The backend needs to provide the corresponding sign-in, sign-out and user endpoints.

Installation

bash

npm install react-native-laravel-sanctum

The package uses expo-secure-store and therefore requires a new native app build. The README includes setup instructions and an example app.

Technical structure

Explore each part directly in the repository.

674df4dAuthProvider.tsx

App state

AuthProvider holds the user and authentication state. Components access them through useAuth.

View source code

Show codeHide code

src/contexts/AuthProvider.tsx 674df4d

9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24const AuthProvider: React.FC<AuthProviderProps> = ({ config, children }) => {
  const [currentConfig, setCurrentConfig] = useState<AuthConfig>(config);
  const [currentUser, setCurrentUser] = useState<User | null>(null);
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);
  const [authService, setAuthService] = useState<AuthService | undefined>();

  useEffect(() => {
    if (authService) {
      checkIfAuthenticated();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [authService]);

  useEffect(() => {
    return setAuthService(new AuthService(currentConfig));
  }, [currentConfig]);

Lines 9 to 24 of 114, full file on GitHub

674df4dAuthService.ts

Requests to Laravel

AuthService calls the configured endpoints and sets the stored token in the Authorization header.

View source code

Show codeHide code

src/services/AuthService.ts 674df4d

50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65private async getRequestHeaders() {
  const headers: Record<string, string> = {
    'Content-Type': 'application/json',
  };

  if (this.csrfToken) {
    headers['X-XSRF-TOKEN'] = this.csrfToken;
  }

  const currentToken = await TokenStorage.getToken();
  if (currentToken) {
    headers.Authorization = `Bearer ${currentToken}`;
  }

  return headers;
}

Lines 50 to 65 of 176, full file on GitHub

674df4dTokenStorage.native.ts

Token on the device

The native TokenStorage implementation stores, reads and removes the token through Expo SecureStore.

View source code

Show codeHide code

src/utils/TokenStorage.native.ts 674df4d

1
2
3
4
5
6
7
8
9
10
11
12
13import * as SecureStore from 'expo-secure-store';

class TokenStorage {
  private static readonly TOKEN_KEY = 'authToken';

  static async saveToken(token: string): Promise<void> {
    try {
      await SecureStore.setItemAsync(TokenStorage.TOKEN_KEY, token);
    } catch (error) {
      console.error('Error while saving the encrypted token:', error);
      throw error;
    }
  }

Lines 1 to 13 of 37, full file on GitHub

Next project pr0p0ll apps Community,Polls