|
| 1 | +--- |
| 2 | +title: Browser |
| 3 | +order: 250 |
| 4 | +--- |
| 5 | + |
| 6 | +## Overview |
| 7 | + |
| 8 | +The Browser API allows you to open URLs in an in-app browser that is "owned" by your application. This is essential when working with OAuth redirects since you need to provide a redirect URL that would naturally open in the user's default browser. |
| 9 | + |
| 10 | +```php |
| 11 | +use Native\Mobile\Facades\Browser; |
| 12 | +``` |
| 13 | + |
| 14 | +## Methods |
| 15 | + |
| 16 | +### `inApp()` |
| 17 | + |
| 18 | +Opens a URL in an in-app browser window. |
| 19 | + |
| 20 | +**Parameters:** |
| 21 | +- `string $url` - The URL to open in the in-app browser |
| 22 | + |
| 23 | +```php |
| 24 | +Browser::inApp('https://nativephp.com/mobile'); |
| 25 | +``` |
| 26 | + |
| 27 | +## Use Cases |
| 28 | + |
| 29 | +### OAuth Authentication |
| 30 | + |
| 31 | +The in-app browser is particularly useful for OAuth flows where you need to: |
| 32 | +- Redirect users to a third-party authentication provider |
| 33 | +- Capture the redirect URL after authentication |
| 34 | +- Return control to your app seamlessly |
| 35 | + |
| 36 | +```php |
| 37 | +use Native\Mobile\Facades\Browser; |
| 38 | + |
| 39 | +class AuthController extends Component |
| 40 | +{ |
| 41 | + public function authenticateWithProvider() |
| 42 | + { |
| 43 | + // Open OAuth provider in in-app browser |
| 44 | + Browser::inApp('https://provider.com/oauth/authorize?client_id=your_client_id&redirect_uri=your_app_scheme://oauth/callback'); |
| 45 | + } |
| 46 | +} |
| 47 | +``` |
| 48 | + |
| 49 | +### External Content |
| 50 | + |
| 51 | +Display external content while keeping users within your app: |
| 52 | + |
| 53 | +```php |
| 54 | +// Open documentation |
| 55 | +Browser::inApp('https://docs.example.com/help'); |
| 56 | + |
| 57 | +// Open terms of service |
| 58 | +Browser::inApp('https://example.com/terms'); |
| 59 | + |
| 60 | +// Open privacy policy |
| 61 | +Browser::inApp('https://example.com/privacy'); |
| 62 | +``` |
| 63 | + |
| 64 | +## Integration with Deep Links |
| 65 | + |
| 66 | +Use the in-app browser in conjunction with App/Universal/Deep links for complete OAuth flows: |
| 67 | + |
| 68 | +1. **Open OAuth provider** - Use `Browser::inApp()` to start authentication |
| 69 | +2. **User authenticates** - User completes authentication in the in-app browser |
| 70 | +3. **Redirect to app** - OAuth provider redirects to your app's deep link |
| 71 | +4. **Handle in app** - Your app receives the deep link and processes the authentication |
| 72 | + |
| 73 | +```php |
| 74 | +use Native\Mobile\Facades\Browser; |
| 75 | +use Livewire\Attributes\On; |
| 76 | +use Native\Mobile\Events\DeepLink\Received; |
| 77 | + |
| 78 | +class OAuthHandler extends Component |
| 79 | +{ |
| 80 | + public function startOAuth() |
| 81 | + { |
| 82 | + Browser::inApp('https://github.com/login/oauth/authorize?client_id=your_client_id&redirect_uri=myapp://oauth/callback'); |
| 83 | + } |
| 84 | +} |
| 85 | +``` |
| 86 | + |
| 87 | +## Platform Behavior |
| 88 | + |
| 89 | +### iOS |
| 90 | +- Uses `SFSafariViewController` for the in-app browser |
| 91 | +- Provides native Safari experience within your app |
| 92 | +- Includes address bar, navigation controls, and share functionality |
| 93 | +- Users can easily return to your app |
| 94 | + |
| 95 | +### Android |
| 96 | +- Uses `Chrome Custom Tabs` when available |
| 97 | +- Falls back to `WebView` if Custom Tabs unavailable |
| 98 | +- Provides native browser experience |
| 99 | +- Maintains your app's context |
| 100 | + |
| 101 | +## Best Practices |
| 102 | + |
| 103 | +1. **Use for OAuth flows** - Perfect for authentication redirects |
| 104 | +2. **Keep users in your app** - Better than opening external browser |
| 105 | +3. **Combine with deep links** - Essential for complete OAuth implementation |
| 106 | +4. **Handle errors gracefully** - Network issues or invalid URLs should be handled |
| 107 | +5. **Provide user feedback** - Show loading states when opening URLs |
| 108 | + |
| 109 | +## Security Considerations |
| 110 | + |
| 111 | +- **Validate URLs** - Ensure URLs are from trusted sources |
| 112 | +- **Handle redirects** - Be prepared for OAuth redirects back to your app |
| 113 | +- **Secure communication** - Always use HTTPS for sensitive operations |
| 114 | +- **User consent** - Make it clear when opening external content |
| 115 | + |
| 116 | +The in-app browser provides a seamless way to handle external content and OAuth flows while maintaining your app's user experience. |
0 commit comments