git show 674df4d 2 / 18

React Native Sanctum

Anmeldung per Laravel Sanctum für React-Native-Apps. Den Token speichert die Bibliothek im Expo SecureStore.

branch: open-source
typ: Open Source,React Native
stack: React Native,Laravel Sanctum
remote: github.com/Tschucki/react-native-laravel-sanctum
stars: ★ 22
npm: 304 Downloads in 12 Monaten Stand 28.10.2026
ci: ci.yml
lizenz: MIT
commit: 674df4d

README.md

Anmeldung mit Laravel Sanctum

Das Paket bindet ein Laravel-Sanctum-Backend an eine React-Native-App an. Es stellt Funktionen für Anmeldung, Abmeldung, den aktuellen Benutzer und die Prüfung des Anmeldestatus bereit.

In der App verwenden

Ein AuthProvider umschließt die Anwendung. Komponenten greifen über useAuth auf die Funktionen und den Benutzerzustand zu.

tsx

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

Die API-Endpunkte werden in der Konfiguration des Providers hinterlegt. Das Backend muss die entsprechenden Endpunkte für Anmeldung, Abmeldung und Benutzerabfrage bereitstellen.

Installation

bash

npm install react-native-laravel-sanctum

Das Paket verwendet expo-secure-store und benötigt deshalb einen neuen nativen App-Build. Die README enthält die Einrichtung und eine Beispiel-App.

Technischer Aufbau

Die einzelnen Bausteine lassen sich direkt im Repository ansehen.

674df4dAuthProvider.tsx

Zustand in der App

AuthProvider hält Benutzer und Anmeldestatus bereit. Komponenten greifen über useAuth darauf zu.

Quellcode ansehen

Code zeigenCode verbergen

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]);

Zeilen 9 bis 24 von 114, ganze Datei auf GitHub

674df4dAuthService.ts

Anfragen an Laravel

AuthService ruft die konfigurierten Endpunkte auf und setzt den gespeicherten Token im Authorization-Header.

Quellcode ansehen

Code zeigenCode verbergen

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;
}

Zeilen 50 bis 65 von 176, ganze Datei auf GitHub

674df4dTokenStorage.native.ts

Token auf dem Gerät

Die native TokenStorage-Implementierung speichert, liest und entfernt den Token über Expo SecureStore.

Quellcode ansehen

Code zeigenCode verbergen

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;
    }
  }

Zeilen 1 bis 13 von 37, ganze Datei auf GitHub

Nächstes Projekt pr0p0ll apps Community,Umfragen