|
1 | | -# react-native-laravel-sanctum |
| 1 | +# React Native Laravel Sanctum |
2 | 2 |
|
3 | | -React Native auth package for Laravel Sanctum integration |
| 3 | +React Native auth package for [Laravel Sanctum ](https://laravel.com/docs/10.x/sanctum) integration. While this package is mainly build for Laravel Sanctum APIs, you can use this library for other API-Backends as well. |
| 4 | + |
| 5 | +## Table of Contents |
| 6 | + |
| 7 | +- [Features](#features) |
| 8 | +- [Installation](#installation) |
| 9 | +- [Basic Usage](#basic-usage) |
| 10 | +- [Example App](#example-app) |
| 11 | +- [Documentation](#documentation) |
| 12 | +- [Contributing](#contributing) |
| 13 | +- [License](#license) |
| 14 | + |
| 15 | +## Features |
| 16 | + |
| 17 | +- [x] Login |
| 18 | +- [x] Logout |
| 19 | +- [x] Get current user |
| 20 | +- [x] Check if user is authenticated |
| 21 | +- [x] CSRF-Token |
4 | 22 |
|
5 | 23 | ## Installation |
6 | 24 |
|
7 | 25 | ```sh |
8 | 26 | npm install react-native-laravel-sanctum |
9 | 27 | ``` |
| 28 | +### Install native dependencies |
| 29 | +As the package relies on `expo-secure-store` you will need to create a new build of your app to use it. |
| 30 | + |
| 31 | +## Basic Usage |
10 | 32 |
|
11 | | -## Usage |
| 33 | +Wrap your app with `AuthProvider` and pass the `config` object as a prop. |
12 | 34 |
|
13 | 35 | ```js |
14 | | -import { multiply } from 'react-native-laravel-sanctum'; |
| 36 | +import { AuthProvider } from 'react-native-laravel-sanctum'; |
15 | 37 |
|
16 | | -// ... |
17 | 38 |
|
18 | | -const result = await multiply(3, 7); |
| 39 | +export default function App() { |
| 40 | + const config = { |
| 41 | + loginUrl: 'https://your-awesome-domain/api/sanctum/token', |
| 42 | + logoutUrl: 'https://your-awesome-domain/api/logout', |
| 43 | + userUrl: 'https://your-awesome-domain/api/user', |
| 44 | + }; |
| 45 | + |
| 46 | + return ( |
| 47 | + <AuthProvider config={config}> |
| 48 | + <View> |
| 49 | + ... |
| 50 | + </View> |
| 51 | + </AuthProvider> |
| 52 | + ); |
| 53 | +} |
19 | 54 | ``` |
20 | 55 |
|
| 56 | +You can now use the `useAuth` hook within the AuthProvider to access the auth methods. |
| 57 | + |
| 58 | +```js |
| 59 | +import { useAuth } from 'react-native-laravel-sanctum'; |
| 60 | + |
| 61 | +export default function Login() { |
| 62 | + const { login, getToken, updateUser, setUserIsAuthenticated, isAuthenticated, logout, currentUser } = useAuth(); |
| 63 | + const [email, setEmail] = useState(''); |
| 64 | + const [password, setPassword] = useState(''); |
| 65 | + |
| 66 | + const handleLogin = async () => { |
| 67 | + const tokenObtained = await login(email, password, 'Test-Device'); |
| 68 | + if (tokenObtained) { |
| 69 | + const user = await updateUser(); |
| 70 | + |
| 71 | + if (user.id) { |
| 72 | + setUserIsAuthenticated(true); |
| 73 | + } |
| 74 | + } |
| 75 | + }; |
| 76 | + |
| 77 | + return ( |
| 78 | + <View> |
| 79 | + <Text >You are not logged in.</Text> |
| 80 | + <TextInput |
| 81 | + onChangeText={text => setEmail(text)} |
| 82 | + value={email} |
| 83 | + placeholder='Email' |
| 84 | + /> |
| 85 | + <TextInput |
| 86 | + onChangeText={text => setPassword(text)} |
| 87 | + value={password} |
| 88 | + secureTextEntry |
| 89 | + placeholder='Password' |
| 90 | + /> |
| 91 | + <Pressable onPress={handleLogin}> |
| 92 | + <Text>Login</Text> |
| 93 | + </Pressable> |
| 94 | + </View> |
| 95 | + ); |
| 96 | +} |
| 97 | +``` |
| 98 | + |
| 99 | +## Example App |
| 100 | + |
| 101 | +You can find the example app [here](https://github.com/Tschucki/react-native-laravel-sanctum-example-app). |
| 102 | + |
| 103 | +## Documentation |
| 104 | + |
| 105 | +You can find the documentation [here](https://github.com/Tschucki/react-native-laravel-sanctum/wiki). |
| 106 | + |
21 | 107 | ## Contributing |
22 | 108 |
|
23 | 109 | See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow. |
24 | 110 |
|
25 | 111 | ## License |
26 | 112 |
|
27 | 113 | MIT |
28 | | - |
29 | | ---- |
30 | | - |
31 | | -Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) |
|
0 commit comments