diff --git a/resources/views/docs/mobile/2/concepts/authentication.md b/resources/views/docs/mobile/2/concepts/authentication.md index c86ebd80..e0c54a7c 100644 --- a/resources/views/docs/mobile/2/concepts/authentication.md +++ b/resources/views/docs/mobile/2/concepts/authentication.md @@ -74,18 +74,34 @@ You will likely want to use an OAuth client library in your app to make interact When initiating the auth flow for the user, you should use the `Native\Mobile\Facades\Browser::auth()` API, as this is purpose-built for securely passing authorization codes back from the OAuth service to your app. -You should set your redirect URL to `nativephp://127.0.0.1/some/route`, where `some/route` is a route you've defined in -your app's routes that will be able to handle the auth code. +For this to work, you must set a `NATIVEPHP_DEEPLINK_SCHEME` that will be unique for your application on users' devices. -Note that the scheme of the redirect URL in this case is **always** `nativephp://`. This has nothing to do with any -custom deep link scheme you may have set for your app. It is only tied to the `Browser::auth()` session. +```dotenv +NATIVEPHP_DEEPLINK_SCHEME=myapp +``` + +Then you must define your redirect URL. It should match your scheme and the route in your app that will handle the callback +data. + +```php +Browser::auth('https://workos.com/my-company/auth?redirect=myapp://auth/handle') +``` + +Most services will expect you to pre-define your redirect URLs as a security feature. You should be able to provide your +exact URL, as this will be the most secure method. + +How you handle the response in your app depends on how that particular API operates and the needs of your application. diff --git a/resources/views/docs/mobile/2/getting-started/development.md b/resources/views/docs/mobile/2/getting-started/development.md index e232e08a..09c989a9 100644 --- a/resources/views/docs/mobile/2/getting-started/development.md +++ b/resources/views/docs/mobile/2/getting-started/development.md @@ -98,10 +98,42 @@ If you're familiar with these tools, you can easily open the projects using the php artisan native:open ``` +### Configuration + +You can configure the folders that the `watch` command pays attention to in your `config/nativephp.php` file: + +```php +'hot_reload' => [ + 'watch_paths' => [ + 'app', + 'routes', + 'config', + 'database', + // Make sure "public" is listed in your config [tl! highlight:1] + 'public', + ], +] +``` + + + + ## Hot Reloading We've tried to make compiling your apps as fast as possible, but when coming from the 'make a change; hit refresh'-world -of PHP development that we all love, compiling apps can feel like a slow and time-consuming process. +of typical browser-based PHP development that we all love, compiling apps can feel like a slow and time-consuming +process. Hot reloading aims to make your app development experience feel just like home. @@ -111,69 +143,73 @@ You can start hot reloading by running the following command: php artisan native:watch ``` -You can also pass the `--watch` option to the `native:run` command. + This will start a long-lived process that watches your application's source files for changes, pushing them into the emulator after any updates and reloading the current screen. -Use this in tandem with Vite's own HMR for the platform you wish to test on: +If you're using Vite, we'll also use your Node CLI tool of choice (`npm`, `bun`, `pnpm`, or `yarn`) to run Vite's HMR +server. -```shell -npm run dev -- --mode=ios +### Enabling HMR -npm run dev -- --mode=android -``` +To make HMR work, you'll need to add the `hot` file helper to your `laravel` plugin's config in your `vite.config.js`: -This is useful during development for quickly testing changes without re-compiling your entire app. When you make -changes to any files in your Laravel app, the web view will be reloaded and your changes should show almost immediately. +```js +import { nativephpMobile, nativephpHotFile } from './vendor/nativephp/mobile/resources/js/vite-plugin.js'; // [tl! focus] -Vite HMR is perfect for apps that use SPA frameworks like Vue or React to build the UI. It even works on real devices, -not just simulators! As long as the device is on the same network as the development machine. +export default defineConfig({ + plugins: [ + laravel({ + input: ['resources/css/app.css', 'resources/js/app.js'], + refresh: true, + hotFile: nativephpHotFile(), // [tl! focus] + }), + tailwindcss(), + nativephpMobile(), + ] +}); +``` - -### Configuration - -You can configure the folders that the `watch` command pays attention to in your `config/nativephp.php` file: +```shell +# Terminal 1 +php artisan native:watch ios -```php -'hot_reload' => [ - 'watch_paths' => [ - 'app', - 'routes', - 'config', - 'database', - // Make sure "public" is listed in your config [tl! highlight:1] - 'public', - ], -] +# Terminal 2 +php artisan native:watch android ``` -### Order matters - -Depending on which order you run these commands, you may find that hot reloading doesn't work immediately. It's often -best to get the commands running, get your app open, and then make a request to a new screen to allow your app to pick -up the `hot` file's presence and connect to the HMR server. +This way you can see your changes reflected in real-time on both platforms **at the same time**. Wild. + -