docs: add example app

Author: Tschucki

.github/workflows/ci.yml

@@ -46,3 +46,16 @@ jobs:
 
       - name: Build package
         run: yarn prepack
+
+  build-web:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup
+        uses: ./.github/actions/setup
+
+      - name: Build example for Web
+        run: |
+          yarn example expo export:web

example/.gitignore

@@ -0,0 +1 @@
+web-build

example/App.js

@@ -0,0 +1 @@
+export { default } from './src/App';

example/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "react-native-laravel-sanctum-example",
+    "slug": "react-native-laravel-sanctum-example",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

example/assets/adaptive-icon.png

@@ -0,0 +1,22 @@
+const path = require('path');
+const pak = require('../package.json');
+
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      [
+        'module-resolver',
+        {
+          extensions: ['.tsx', '.ts', '.js', '.json'],
+          alias: {
+            // For development, we want to alias the library to the source
+            [pak.name]: path.join(__dirname, '..', pak.source),
+          },
+        },
+      ],
+    ],
+  };
+};

example/assets/favicon.png

@@ -0,0 +1,43 @@
+const path = require('path');
+const escape = require('escape-string-regexp');
+const { getDefaultConfig } = require('@expo/metro-config');
+const exclusionList = require('metro-config/src/defaults/exclusionList');
+const pak = require('../package.json');
+
+const root = path.resolve(__dirname, '..');
+const modules = Object.keys({ ...pak.peerDependencies });
+
+const defaultConfig = getDefaultConfig(__dirname);
+
+/**
+ * Metro configuration
+ * https://facebook.github.io/metro/docs/configuration
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const config = {
+  ...defaultConfig,
+
+  projectRoot: __dirname,
+  watchFolders: [root],
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we block them at the root, and alias them to the versions in example's node_modules
+  resolver: {
+    ...defaultConfig.resolver,
+
+    blacklistRE: exclusionList(
+      modules.map(
+        (m) =>
+          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
+      )
+    ),
+
+    extraNodeModules: modules.reduce((acc, name) => {
+      acc[name] = path.join(__dirname, 'node_modules', name);
+      return acc;
+    }, {}),
+  },
+};
+
+module.exports = config;

example/assets/icon.png

@@ -0,0 +1,28 @@
+{
+  "name": "example",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~49.0.7",
+    "expo-secure-store": "~12.3.1",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.72.4",
+    "react-native-laravel-sanctum": "file:react-native-laravel-sanctum-0.2.0.tgz",
+    "react-native-web": "~0.19.6"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@expo/webpack-config": "^19.0.0",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-module-resolver": "^5.0.0"
+  },
+  "private": true
+}

example/assets/splash.png

@@ -0,0 +1,146 @@
+import React, { useEffect, useState } from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { AuthProvider, useAuth } from 'react-native-laravel-sanctum';
+
+function Login() {
+  const {
+    login,
+    getToken,
+    updateUser,
+    setUserIsAuthenticated,
+    isAuthenticated,
+    currentUser,
+  } = useAuth();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  useEffect(() => {
+    console.log(currentUser);
+  }, [currentUser]);
+  useEffect(() => {
+    console.log(isAuthenticated);
+  }, [isAuthenticated]);
+
+  const handleLogin = async () => {
+    console.log(await getToken());
+    const tokenObtained = await login(email, password, 'Test-Device');
+    console.log(tokenObtained);
+    if (tokenObtained) {
+      const user = await updateUser();
+      if (user && user.id) {
+        setUserIsAuthenticated(true);
+      }
+    }
+  };
+
+  return (
+    <View style={styles.view}>
+      <Text style={styles.caption}>You are not logged in.</Text>
+      <TextInput
+        style={styles.textInput}
+        onChangeText={(text) => setEmail(text)}
+        value={email}
+        placeholder="Email"
+      />
+      <TextInput
+        style={styles.textInput}
+        onChangeText={(text) => setPassword(text)}
+        value={password}
+        secureTextEntry
+        placeholder="Password"
+      />
+      <Pressable style={styles.button} onPress={handleLogin}>
+        <Text style={styles.buttonText}>Login</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+function Logout() {
+  const { logout, setUserIsAuthenticated, updateUser, currentUser } = useAuth();
+
+  const handleLogout = async () => {
+    const isLoggedOut = await logout();
+    if (isLoggedOut) {
+      setUserIsAuthenticated(false);
+      await updateUser();
+    }
+  };
+
+  return (
+    <View style={styles.view}>
+      <Text style={styles.caption}>
+        You are logged in as {currentUser ? currentUser.name : ''}
+      </Text>
+      <Pressable style={styles.button} onPress={handleLogout}>
+        <Text style={styles.buttonText}>Logout</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+function Example() {
+  const { isAuthenticated } = useAuth();
+  return (
+    <View style={styles.view}>{isAuthenticated ? <Logout /> : <Login />}</View>
+  );
+}
+
+export default function App() {
+  const config = {
+    loginUrl: 'http://127.0.0.1:8000/api/sanctum/token',
+    logoutUrl: 'http://127.0.0.1:8000/api/logout',
+    userUrl: 'http://127.0.0.1:8000/api/user',
+  };
+
+  return (
+    <AuthProvider config={config}>
+      <View style={styles.container}>
+        <Example />
+      </View>
+    </AuthProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button: {
+    backgroundColor: '#f59e0b',
+    padding: 12,
+    minWidth: '80%',
+    borderRadius: 5,
+    alignItems: 'center',
+  },
+  buttonText: {
+    fontWeight: '800',
+    letterSpacing: 0.5,
+    lineHeight: 20,
+    color: '#fff',
+  },
+  textInput: {
+    height: 40,
+    borderColor: 'gray',
+    borderWidth: 1,
+    minWidth: '80%',
+    padding: 10,
+    borderRadius: 5,
+    marginBottom: 10,
+  },
+  caption: {
+    marginBottom: 10,
+    fontWeight: '800',
+    letterSpacing: 0.5,
+    lineHeight: 20,
+    color: '#000',
+    textAlign: 'center',
+  },
+  view: {
+    padding: 15,
+    alignItems: 'center',
+  },
+});

example/babel.config.js

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig",
+  "compilerOptions": {
+    // Avoid expo-cli auto-generating a tsconfig
+  }
+}

example/metro.config.js

@@ -0,0 +1,25 @@
+const path = require('path');
+const createExpoWebpackConfigAsync = require('@expo/webpack-config');
+const { resolver } = require('./metro.config');
+
+const root = path.resolve(__dirname, '..');
+const node_modules = path.join(__dirname, 'node_modules');
+
+module.exports = async function (env, argv) {
+  const config = await createExpoWebpackConfigAsync(env, argv);
+
+  config.module.rules.push({
+    test: /\.(js|jsx|ts|tsx)$/,
+    include: path.resolve(root, 'src'),
+    use: 'babel-loader',
+  });
+
+  // We need to make sure that only one version is loaded for peerDependencies
+  // So we alias them to the versions in example's node_modules
+  Object.assign(config.resolve.alias, {
+    ...resolver.extraNodeModules,
+    'react-native-web': path.join(node_modules, 'react-native-web'),
+  });
+
+  return config;
+};

example/package.json

@@ -31,6 +31,7 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "prepack": "bob build",
+    "example": "yarn --cwd example",
     "release": "release-it"
   },
   "keywords": [