React Native Laravel Sanctum

React Native auth package for Laravel Sanctum integration. While this package is mainly build for Laravel Sanctum APIs, you can use this library for other API-Backends as well.

Table of Contents

• Features
• Installation
• Basic Usage
• Example App
• Documentation
• Contributing
• License

Features

• Login
• Logout
• Get current user
• Check if user is authenticated
• CSRF-Token

Installation

npm install react-native-laravel-sanctum

Install native dependencies

As the package relies on expo-secure-store you will need to create a new build of your app to use it.

Basic Usage

Wrap your app with AuthProvider and pass the config object as a prop.

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


export default function App() {
  const config = {
    loginUrl: 'https://your-awesome-domain/api/sanctum/token',
    logoutUrl: 'https://your-awesome-domain/api/logout',
    userUrl: 'https://your-awesome-domain/api/user',
  };

  return (
    <AuthProvider config={config}>
      <View>
        ...
      </View>
    </AuthProvider>
  );
}

You can now use the useAuth hook within the AuthProvider to access the auth methods.

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

export default function Login() {
  const { login, getToken, updateUser, setUserIsAuthenticated, isAuthenticated, logout, currentUser } = useAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = async () => {
    const tokenObtained = await login(email, password, 'Test-Device');
    if (tokenObtained) {
      const user = await updateUser();

      if (user.id) {
        setUserIsAuthenticated(true);
      }
    }
  };

  return (
    <View>
      <Text >You are not logged in.</Text>
      <TextInput
        onChangeText={text => setEmail(text)}
        value={email}
        placeholder='Email'
      />
      <TextInput
        onChangeText={text => setPassword(text)}
        value={password}
        secureTextEntry
        placeholder='Password'
      />
      <Pressable onPress={handleLogin}>
        <Text>Login</Text>
      </Pressable>
    </View>
  );
}

Example App

You can find the example app here.

Documentation

You can find the documentation here.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT