@frontegg/ionic-capacitor 2.0.11-alpha.11622605768 → 2.0.11-alpha.14658447465

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/README.md +0 -893
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@frontegg/ionic-capacitor",
3
- "version": "2.0.11-alpha.11622605768",
3
+ "version": "2.0.11-alpha.14658447465",
4
4
  "description": "Frontegg Ionic Capacitor SDK",
5
5
  "main": "dist/plugin.cjs.js",
6
6
  "module": "dist/esm/index.js",
package/README.md DELETED
@@ -1,893 +0,0 @@
1
- # @frontegg/ionic-capacitor
2
-
3
- The @frontegg/ionic-capacitor SDK integrates Frontegg's authentication and user management capabilities into Ionic Capacitor apps. It simplifies adding features like login, signup, and user profile management, enhancing security and user experience for mobile applications. Follow the integration steps below to use the SDK:
4
-
5
- ## Table of Contents
6
-
7
- - [Project Requirements](#project-requirements)
8
- - [Getting Started](#getting-started)
9
- - [Prepare Frontegg workspace](#prepare-frontegg-workspace)
10
- - [Setup Hosted Login](#setup-hosted-login)
11
- - [Add frontegg package to the project](#add-frontegg-package-to-the-project)
12
- - [Configure your application](#configure-your-application)
13
- - [Setup iOS Project](#setup-ios-project)
14
- - [Create Frontegg plist file](#create-frontegg-plist-file)
15
- - [Config iOS associated domain](#config-ios-associated-domain)
16
- - [Setup Android Project](#setup-android-project)
17
- - [Set minimum SDK version](#set-minimum-sdk-version)
18
- - [Configure build config fields](#configure-build-config-fields)
19
- - [Config Android AssetLinks](#config-android-assetlinks)
20
- - [Enabling Chrome Custom Tabs for Social Login](#enabling-chrome-custom-tabs-for-social-login)
21
- - [Angular Usages](#angular-usages)
22
- - [Integrate Frontegg](#integrate-frontegg)
23
- - [Protect Routes](#protect-routes)
24
- - [Get Logged In User](#get-logged-in-user)
25
- - [Switch Tenant](#switch-tenant)
26
- - [Embedded Webview vs Hosted](#embedded-webview-vs-hosted)
27
- - [Enable hosted webview in iOS Platform](#enable-hosted-webview-in-ios-platform)
28
- - [Enable hosted webview in Android Platform](#enable-hosted-webview-in-android-platform)
29
- - [Multi-Region Support](#multi-region-support)
30
- - [Step 1: Add regions to your Frontegg configuration](#step-1-add-regions-to-your-frontegg-configuration)
31
- - [Setup multi-region support for iOS Platform](#setup-multi-region-support-for-ios-platform)
32
- - [Setup multi-region support for Android Platform](#setup-multi-region-support-for-android-platform)
33
- - [Multi-apps Android Support](#multi-apps-support)
34
- - [Step 1: Add application id to your Frontegg configuration](#step-1-add-application-id-to-your-frontegg-configuration)
35
-
36
- ## Project Requirements
37
-
38
- - Minimum iOS deployment version **=> 14**
39
- - Min Android SDK **=> 26**
40
-
41
- ## Getting Started
42
-
43
- ### Prepare Frontegg workspace
44
-
45
- Navigate to [Frontegg Portal Settings](https://portal.frontegg.com/development/settings), If you don't have application
46
- follow integration steps after signing up.
47
- Copy FronteggDomain to future steps
48
- from [Frontegg Portal Domain](https://portal.frontegg.com/development/settings/domains)
49
-
50
- ### Setup Hosted Login
51
-
52
- - Navigate to [Login Method Settings](https://portal.frontegg.com/development/authentication/hosted)
53
- - Toggle Hosted login method for iOS:
54
- - Add `{{IOS_BUNDLE_IDENTIFIER}}://{{FRONTEGG_BASE_URL}}/ios/oauth/callback`
55
- - Toggle Hosted login method for Android:
56
- - Add `{{ANDROID_PACKAGE_NAME}}://{{FRONTEGG_BASE_URL}}/android/oauth/callback` **(without assetlinks)**
57
- - Add `Add https://{{FRONTEGG_BASE_URL}}/oauth/account/redirect/android/{{ANDROID_PACKAGE_NAME}}` **(required for assetlinks)**
58
- - Add `{{FRONTEGG_BASE_URL}}/oauth/authorize`
59
- - Replace `IOS_BUNDLE_IDENTIFIER` with your application identifier
60
- - Replace `FRONTEGG_BASE_URL` with your frontegg base url
61
- - Replace `ANDROID_PACKAGE_NAME` with your android package name
62
- -
63
-
64
- ### Add frontegg package to the project
65
-
66
- Add capacitor to the ionic project if not exists:
67
-
68
- ```bash
69
- ionic integrations enable capacitor
70
- ```
71
-
72
- Use a package manager npm/yarn to install frontegg React Native library.
73
-
74
- **NPM:**
75
-
76
- ```bash
77
- npm install -s @frontegg/react-native
78
- ```
79
-
80
- **Yarn:**
81
-
82
- ```bash
83
- yarn add @frontegg/react-native
84
- ```
85
-
86
- ## Configure your application
87
-
88
- 1. Create or Modify your `capacitor.config.ts` file:
89
-
90
- ```typescript
91
- import { CapacitorConfig } from '@capacitor/cli';
92
-
93
- const config: CapacitorConfig = {
94
- appId: '{YOUR_APPLICATION_ID}',
95
- appName: '{YOUR_APPLICATION_NAME}',
96
- webDir: 'www',
97
- server: {
98
- androidScheme: 'https'
99
- },
100
- ios: {
101
- path: 'ios',
102
- },
103
- android: {
104
- path: 'android',
105
- },
106
-
107
- plugins: {
108
- FronteggNative:{
109
- baseUrl: 'https://{FRONTEGG_DOMAIN_HOST.com}',
110
- clientId: '{FRONTEGG_CLIENT_ID}',
111
- }
112
- }
113
- };
114
-
115
- export default config;
116
- ```
117
-
118
- 2. Add the iOS and Android projects to your ionic app by running the following commands:
119
-
120
- **NOTE: skip the command if you already have the project added.**
121
-
122
- ```bash
123
- ionic capacitor add android
124
- ionic capacitor add ios
125
- ```
126
-
127
- ## Setup iOS Project
128
-
129
- ### Create Frontegg plist file
130
-
131
- To setup your SwiftUI application to communicate with Frontegg.
132
-
133
- 1. Open the ios folder created by capacitor, and run this command:
134
- ```bash
135
- ionic capacitor open ios
136
- ```
137
- or open the Xcode manually.
138
- 2. Create a new file named `Frontegg.plist` under your root project directory, this file will store values to be used
139
- variables by Frontegg SDK:
140
-
141
- ```xml
142
- <?xml version="1.0" encoding="UTF-8"?>
143
- <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
144
- <plist version="1.0">
145
- <dict>
146
- <key>lateInit</key>
147
- <true/>
148
- </dict>
149
- </plist>
150
- ```
151
-
152
- 3. Enable `CODE_SIGNING_ALLOWED` in the Podfile under `/ios/App` folder.
153
-
154
- ### Handle Open App with URL
155
-
156
- To handle Login with magic link and other authentication methods that require to open the app with a URL, you have to
157
- add the following code to the `AppDelegate.swift` file.
158
-
159
- ```swift
160
-
161
- import UIKit
162
- import Capacitor
163
- import FronteggSwift
164
-
165
- @UIApplicationMain
166
- class AppDelegate: UIResponder, UIApplicationDelegate {
167
-
168
- /*
169
- * Called when the app was launched with a url. Feel free to add additional processing here,
170
- * but if you want the App API to support tracking app url opens, make sure to keep this call
171
- */
172
- func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
173
-
174
- if(FronteggAuth.shared.handleOpenUrl(url)){
175
- return true
176
- }
177
-
178
- return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
179
- }
180
-
181
- /*
182
- * Called when the app was launched with an activity, including Universal Links.
183
- * Feel free to add additional processing here, but if you want the App API to support
184
- * tracking app url opens, make sure to keep this call
185
- */
186
- func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
187
-
188
- if let url = userActivity.webpageURL {
189
- if(FronteggAuth.shared.handleOpenUrl(url)){
190
- return true
191
- }
192
- }
193
- return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)
194
- }
195
- }
196
- ```
197
-
198
- ### Config iOS associated domain
199
-
200
- Configuring your iOS associated domain is required for Magic Link authentication / Reset Password / Activate Account.
201
-
202
- In order to add your iOS associated domain to your Frontegg application, you will need to update in each of your
203
- integrated Frontegg Environments the iOS associated domain that you would like to use with that Environment. Send a POST
204
- request to `https://api.frontegg.com/vendors/resources/associated-domains/v1/ios` with the following payload:
205
-
206
- ```
207
- {
208
- “appId”:[YOUR_ASSOCIATED_DOMAIN]
209
- }
210
- ```
211
-
212
- In order to use our API’s, follow [this guide](‘https://docs.frontegg.com/reference/getting-started-with-your-api’) to
213
- generate a vendor token.
214
-
215
- ### Setup Android Project
216
-
217
- ## Setup Android Project
218
-
219
- ### Set minimum sdk version
220
-
221
- To set up your Android minimum sdk version, open root gradle file at`android/variables.gradle`,
222
-
223
- Modify the minSdkVersion to 26:
224
-
225
- ```groovy
226
- ext {
227
- minSdkVersion = 26
228
- ...
229
- }
230
- ```
231
-
232
- ### Configure build config fields
233
-
234
- To set up your Android application on to communicate with Frontegg, you have to add `buildConfigField` property the
235
- gradle `android/app/build.gradle`.
236
- This property will store frontegg hostname (without https) and client id from previous step:
237
-
238
- ```groovy
239
-
240
- def fronteggDomain = "FRONTEGG_DOMAIN_HOST.com" // without protocol https://
241
- def fronteggClientId = "FRONTEGG_CLIENT_ID"
242
-
243
- android {
244
- defaultConfig {
245
-
246
- manifestPlaceholders = [
247
- "package_name" : applicationId,
248
- "frontegg_domain" : fronteggDomain,
249
- "frontegg_client_id": fronteggClientId
250
- ]
251
- }
252
-
253
-
254
- }
255
- ```
256
-
257
- Add bundleConfig=true if not exists inside the android section inside the app gradle `android/app/build.gradle`
258
-
259
- ```groovy
260
- android {
261
- buildFeatures {
262
- buildConfig = true
263
- }
264
- }
265
- ```
266
-
267
- ### Config Android AssetLinks
268
-
269
- Configuring your Android `AssetLinks` is required for Magic Link authentication / Reset Password / Activate Account /
270
- login with IdPs.
271
-
272
- To add your `AssetLinks` to your Frontegg application, you will need to update in each of your integrated Frontegg
273
- Environments the `AssetLinks` that you would like to use with that Environment. Send a POST request
274
- to `https://api.frontegg.com/vendors/resources/associated-domains/v1/android` with the following payload:
275
-
276
- ```
277
- {
278
- "packageName": "YOUR_APPLICATION_PACKAGE_NAME",
279
- "sha256CertFingerprints": ["YOUR_KEYSTORE_CERT_FINGERPRINTS"]
280
- }
281
- ```
282
-
283
- Each Android app has multiple certificate fingerprint, to get your `DEBUG` sha256CertFingerprint you have to run the
284
- following command:
285
-
286
- For Debug mode, run the following command and copy the `SHA-256` value
287
-
288
- NOTE: make sure to choose the Variant and Config equals to `debug`
289
-
290
- ```bash
291
- ./gradlew signingReport
292
-
293
- ###################
294
- # Example Output:
295
- ###################
296
-
297
- # Variant: debug
298
- # Config: debug
299
- # Store: /Users/davidfrontegg/.android/debug.keystore
300
- # Alias: AndroidDebugKey
301
- # MD5: 25:F5:99:23:FC:12:CA:10:8C:43:F4:02:7D:AD:DC:B6
302
- # SHA1: FC:3C:88:D6:BF:4E:62:2E:F0:24:1D:DB:D7:15:36:D6:3E:14:84:50
303
- # SHA-256: D9:6B:4A:FD:62:45:81:65:98:4D:5C:8C:A0:68:7B:7B:A5:31:BD:2B:9B:48:D9:CF:20:AE:56:FD:90:C1:C5:EE
304
- # Valid until: Tuesday, 18 June 2052
305
-
306
- ```
307
-
308
- For Release mode, Extract the SHA256 using keytool from your `Release` keystore file:
309
-
310
- ```bash
311
- keytool -list -v -keystore /PATH/file.jks -alias YourAlias -storepass *** -keypass ***
312
- ```
313
-
314
- In order to use our API’s, follow [this guide](https://docs.frontegg.com/reference/getting-started-with-your-api) to
315
- generate a vendor token.
316
-
317
-
318
- ### Enabling Chrome Custom Tabs for Social Login
319
-
320
- To enable social login via Chrome Custom Tabs in Android application, modify your `capacitor.config.ts` file and set the useChromeCustomTabs flag to true . By default, the SDK uses the Chrome browser for social login.
321
-
322
- ```typescript
323
- import { CapacitorConfig } from '@capacitor/cli';
324
-
325
- const config: CapacitorConfig = {
326
- appId: '{YOUR_APPLICATION_ID}',
327
- appName: '{YOUR_APPLICATION_NAME}',
328
- webDir: 'www',
329
- server: {
330
- androidScheme: 'https'
331
- },
332
- ios: {
333
- path: 'ios',
334
- },
335
- android: {
336
- path: 'android',
337
- },
338
-
339
- plugins: {
340
- FronteggNative:{
341
- baseUrl: 'https://{FRONTEGG_DOMAIN_HOST.com}',
342
- clientId: '{FRONTEGG_CLIENT_ID}',
343
-
344
- useChromeCustomTabs: true
345
- }
346
- }
347
- };
348
-
349
- export default config;
350
- ```
351
-
352
-
353
- ## Angular Usages
354
-
355
- ### Integrate Frontegg:
356
-
357
- Open the `src/app/app.module.ts` file and add the following line to the before `@NgModule` section:
358
-
359
- ```typescript
360
- import { FronteggService } from '@frontegg/ionic-capacitor';
361
-
362
- @NgModule({
363
- // ...
364
- providers: [ {
365
- provide: 'Frontegg',
366
- useValue: new FronteggService(),
367
- } ]
368
- // ...
369
- })
370
- ```
371
-
372
- ### Protect Routes:
373
-
374
- 1. Create AuthGuard file `src/app/auth.guard.ts`:
375
-
376
- ```typescript
377
- import { CanActivateFn } from '@angular/router';
378
- import { Inject, Injectable } from '@angular/core';
379
- import { FronteggService } from '@frontegg/ionic-capacitor';
380
-
381
-
382
- @Injectable({
383
- providedIn: 'root'
384
- })
385
- export class AuthGuard {
386
-
387
- constructor(@Inject('Frontegg') private fronteggService: FronteggService) {
388
-
389
- /**
390
- * Listens to $isAuthenticated changes
391
- * Reload the page to trigger canActivate function again
392
- */
393
- this.fronteggService.$isAuthenticated.subscribe(async () => {
394
- window.location.reload()
395
- });
396
-
397
- /**
398
- * Listens to application visibility changes
399
- * Reload the page to trigger canActivate
400
- * when application returns from login page without authentication
401
- */
402
- document.addEventListener('visibilitychange', () => {
403
- if (document.visibilityState === 'visible' && !this.fronteggService.getState().isAuthenticated) {
404
- window.location.reload()
405
- }
406
- });
407
- }
408
-
409
- /**
410
- * Wait for loader to finish
411
- * @private
412
- */
413
- private waitForLoader() {
414
- return new Promise((resolve) => {
415
- const unsubscribe = this.fronteggService.$isLoading
416
- .subscribe((isLoading) => {
417
- if (!isLoading) {
418
- resolve(true);
419
- unsubscribe();
420
- }
421
- });
422
- })
423
- }
424
-
425
- /**
426
- * Navigate to login page if user is not authenticated
427
- * @private
428
- */
429
- private async navigateToLoginIfNeeded(): Promise<boolean> {
430
- const { isAuthenticated } = this.fronteggService.getState();
431
- if (!isAuthenticated) {
432
- await this.fronteggService.login()
433
- return false /** prevent navigation */
434
- }
435
- return true /** activate navigation */
436
- }
437
-
438
-
439
- canActivate: CanActivateFn = () => {
440
- const { showLoader } = this.fronteggService.getState();
441
-
442
- if (!showLoader) {
443
- /**
444
- * if showLoader false
445
- * check if user is authenticated
446
- */
447
- return this.navigateToLoginIfNeeded()
448
- }
449
-
450
- /**
451
- * if showLoader true
452
- * wait for loader to finish and then
453
- * check if user is authenticated
454
- */
455
- return new Promise<boolean>(async (resolve) => {
456
- await this.waitForLoader()
457
- const activated = await this.navigateToLoginIfNeeded()
458
- resolve(activated)
459
- })
460
- }
461
- }
462
-
463
-
464
- ```
465
-
466
- 2. Open the `src/app-routing.module.ts` file and add wrap the app routes with loadChildren and apply CanActivate guard:
467
-
468
- ```typescript
469
- import { AuthGuard } from './auth.guard';
470
-
471
- const routes: Routes = [
472
- {
473
- path: '',
474
- canActivate: [ AuthGuard ],
475
- loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
476
- },
477
- ];
478
- ```
479
-
480
- ### Get Logged In User
481
-
482
- Find full example under `example/src/app/tab1` files.
483
-
484
- ```typescript
485
- import { Inject } from '@angular/core';
486
- import { FronteggService, FronteggState } from '@frontegg/ionic-capacitor';
487
-
488
- @Component({
489
- /** .... */
490
- })
491
- export class MyPage implements OnInit {
492
-
493
- constructor(private ngZone: NgZone, @Inject('Frontegg') private fronteggService: FronteggService) {
494
- }
495
-
496
- user: FronteggState['user'] = null
497
- accessToken: string | null = null
498
-
499
- ngOnInit() {
500
- const { user, accessToken } = this.fronteggService.getState();
501
- this.user = user;
502
- this.user = accessToken;
503
-
504
- this.fronteggService.$user.subscribe((user) => {
505
- console.log('change user', user)
506
- this.ngZone.run(() => this.user = user)
507
- })
508
- this.fronteggService.$accessToken.subscribe((accessToken) => {
509
- console.log('change accessToken', accessToken)
510
- this.ngZone.run(() => this.accessToken = accessToken)
511
- })
512
- }
513
- }
514
- ```
515
-
516
- ### Switch Tenant
517
-
518
- Find full example under `example/src/app/tab2` files.
519
-
520
- ```typescript
521
- import { Inject } from '@angular/core';
522
- import { FronteggService, FronteggState } from '@frontegg/ionic-capacitor';
523
-
524
- @Component({
525
- /** .... */
526
- })
527
- export class MyPage implements OnInit {
528
-
529
- constructor(private ngZone: NgZone, @Inject('Frontegg') private fronteggService: FronteggService) {
530
- }
531
-
532
- user: FronteggState['user'] = null
533
- accessToken: string | null = null
534
-
535
- ngOnInit() {
536
- const { user } = this.fronteggService.getState();
537
- this.user = user;
538
- this.fronteggService.$user.subscribe((user) => {
539
- this.ngZone.run(() => this.user = user)
540
- })
541
- }
542
-
543
-
544
- switchTenant(tenantId: string) {
545
- this.fronteggService.switchTenant(tenantId)
546
- }
547
- }
548
- ```
549
-
550
- ## Embedded Webview vs Hosted
551
-
552
- Frontegg SDK supports two authentication methods:
553
-
554
- - Embedded Webview
555
- - Hosted Webview
556
- - `iOS`: ASWebAuthenticationSession
557
- - `Android`: Custom Chrome Tab
558
-
559
- By default, Frontegg SDK will use Embedded Webview.
560
-
561
- ### Enable hosted webview in iOS Platform
562
-
563
- To use ASWebAuthenticationSession you have to set `embeddedMode` to `NO` in `Frontegg.plist` file:
564
-
565
- ```xml
566
- <?xml version="1.0" encoding="UTF-8"?>
567
- <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN">
568
- <plist version="1.0">
569
- <dict>
570
- <key>lateInit</key>
571
- <true/>
572
- <!-- START -->
573
- <key>embeddedMode</key>
574
- <false/>
575
- <!-- END -->
576
- </dict>
577
- </plist>
578
- ```
579
-
580
- ### Enable hosted webview in Android Platform
581
-
582
- to use Custom Chrome Tab you have to set disable embedded activity by adding below code to
583
- the application manifest:
584
-
585
- ```xml
586
-
587
- <manifest xmlns:android="http://schemas.android.com/apk/res/android"
588
- xmlns:tools="http://schemas.android.com/tools">
589
- <application>
590
- <!-- ... -->
591
-
592
- <activity android:name="com.frontegg.android.EmbeddedAuthActivity" tools:replace="android:enabled"
593
- android:enabled="false"/>
594
- <activity android:name="com.frontegg.android.HostedAuthActivity" tools:replace="android:enabled"
595
- android:enabled="true"/>
596
-
597
- <!-- ... -->
598
- </application>
599
- </manifest>
600
- ```
601
-
602
- ## Multi-Region Support
603
-
604
- This guide outlines the steps to configure your Ionic application to support multiple regions.
605
-
606
- ### Step 1: Add regions to your Frontegg configuration
607
-
608
- Add `region` to your Frontegg configuration in `capacitor.config.ts` file:
609
-
610
- Find example code in [example/capacitor.config.ts](example/capacitor.config.ts) file.
611
-
612
- ```typescript
613
- import { CapacitorConfig } from '@capacitor/cli';
614
-
615
- const config: CapacitorConfig = {
616
- /*...*/
617
- plugins: {
618
-
619
- /*...*/
620
-
621
- FronteggNative: {
622
-
623
- /** Remove baseUrl and clientId from here */
624
- // baseUrl: 'https://{FRONTEGG_DOMAIN_HOST.com}',
625
- // clientId: '{FRONTEGG_CLIENT_ID}',
626
-
627
- regions: [ {
628
- key: 'REGION_1_KEY',
629
- baseUrl: 'https://region1.forntegg.com',
630
- clientId: 'REGION_1_CLIEND_ID',
631
- }, {
632
- key: 'REGION_2_KEY',
633
- baseUrl: 'https://region2.forntegg.com',
634
- clientId: 'REGION_2_CLIEND_ID',
635
- } ]
636
- }
637
- }
638
- };
639
-
640
- export default config;
641
-
642
- ```
643
-
644
- ### Step 2: Create region guard service
645
-
646
- Create region guard service, this guard will prevent application init if region not selected,
647
- and checks if specific region selected by getting the native state from the Frontegg SDK.
648
- If the region not exists, the guard will redirect to region selector page.
649
-
650
- Find example code in [example/src/app/region.guard.ts](example/src/app/region.guard.ts) file.
651
-
652
- ```typescript
653
- import { CanActivateFn, Router } from '@angular/router';
654
- import { Inject, Injectable } from '@angular/core';
655
- import { FronteggService } from '@frontegg/ionic-capacitor';
656
-
657
- @Injectable({
658
- providedIn: 'root'
659
- })
660
- export class RegionGuard {
661
- constructor(@Inject('Frontegg') private fronteggService: FronteggService, private router: Router) {
662
- /**
663
- * Listens to $isAuthenticated changes
664
- * Reload the page to trigger canActivate function again
665
- */
666
- this.fronteggService.$selectedRegion.subscribe(async () => {
667
- window.location.reload()
668
- });
669
- }
670
-
671
- canActivate: CanActivateFn = async () => {
672
- const { isRegional } = await this.fronteggService.getConstants();
673
- const nativeState = await this.fronteggService.getNativeState()
674
-
675
- if (!isRegional || nativeState.selectedRegion != null) {
676
- /**
677
- * region already selected, activate navigation
678
- */
679
- return true
680
- }
681
-
682
- /**
683
- * region not selected, redirect to region selector page
684
- */
685
- return this.router.navigate([ '/select-region' ])
686
- }
687
- }
688
- ```
689
-
690
- ### Step 3: Add region guard to application router
691
-
692
- Find example code in [example/src/app/app-routing.module.ts](example/src/app/app-routing.module.ts) file.
693
-
694
- ```typescript
695
- const routes: Routes = [
696
- {
697
- path: '',
698
- canActivate: [ RegionGuard ],
699
- children: [
700
- /**
701
- * Wrap all routes with region guard
702
- * to redirect to region selector page
703
- * if region not exists
704
- */
705
- {
706
- path: '',
707
- canActivate: [ AuthGuard ],
708
- loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
709
- },
710
- ]
711
- }, {
712
- /**
713
- * Add region selector page
714
- * to select region if not exists
715
- */
716
- path: 'select-region',
717
- component: SelectRegionComponent
718
- }
719
- ];
720
- ```
721
-
722
- ### Step 4: Setup multi-region support for iOS Platform
723
-
724
- Following guide outlines the steps to configure iOS application to support multiple regions.
725
-
726
- **First, Adjust Your Frontegg.plist File for Multiple Regions:**
727
- - Remove the existing `baseUrl` and `clientId` keys.
728
- - Add a new boolean property, `lateInit`, and set it to `true`.
729
-
730
- Example Frontegg.plist Structure:
731
- ```xml
732
- <?xml version="1.0" encoding="UTF-8"?>
733
- <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
734
- <plist version="1.0">
735
- <dict>
736
- <key>lateInit</key>
737
- <true/>
738
- </dict>
739
- </plist>
740
- ```
741
- **Secondly, Add Associated Domains for Each Region:**
742
-
743
- Configure the associated domains for each region in your application's settings. This step is crucial for correct API routing and authentication.
744
- Follow the guide [Config iOS Associated Domain](#config-ios-associated-domain) to add your iOS associated domain to your Frontegg application.
745
-
746
-
747
- ### Step 5: Setup multi-region support for Android Platform
748
-
749
- Following guide outlines the steps to configure Android application to support multiple regions.
750
-
751
- **First, Modify the Build.gradle file**
752
- - remove buildConfigFields from your build.gradle file: `legacy`
753
-
754
- ```groovy
755
-
756
- android {
757
- // remove this lines:
758
- // buildConfigField "String", 'FRONTEGG_DOMAIN', "\"$fronteggDomain\""
759
- // buildConfigField "String", 'FRONTEGG_CLIENT_ID', "\"$fronteggClientId\""
760
- }
761
- ```
762
-
763
- **Secondly, Add AssetLinks for Each Region:**
764
-
765
- For each region, configuring your Android `AssetLinks`. This is vital for proper API routing and authentication.
766
- Follow [Config Android AssetLinks](#config-android-assetlinks) to add your Android domains to your Frontegg application.
767
-
768
- **Lastly, Add Intent-Filter in Manifest.xml:**
769
-
770
- The first domain will be placed automatically in the `AndroidManifest.xml` file. For each additional region, you will
771
- need to add an `intent-filter`.
772
- Replace `${FRONTEGG_DOMAIN_2}` with the second domain from the previous step.
773
-
774
- NOTE: if you are using `Custom Chrome Tab` you have to use `android:name` `com.frontegg.android.HostedAuthActivity` instead of `com.frontegg.android.EmbeddedAuthActivity`
775
-
776
- ```xml
777
-
778
- <application>
779
- <activity android:exported="true" android:name="com.frontegg.android.EmbeddedAuthActivity"
780
- tools:node="merge">
781
- <intent-filter android:autoVerify="true">
782
- <action android:name="android.intent.action.VIEW" />
783
-
784
- <category android:name="android.intent.category.DEFAULT" />
785
- <category android:name="android.intent.category.BROWSABLE" />
786
-
787
- <data android:scheme="https" />
788
- <!-- DO NOT COMBINE THE FOLLOWING LINES INTO ONE LINE OR SPLIT TO MULTIPLE -->
789
- <data android:host="${FRONTEGG_DOMAIN_2}"
790
- android:pathPrefix="/oauth/account/activate" />
791
- <data android:host="${FRONTEGG_DOMAIN_2}"
792
- android:pathPrefix="/oauth/account/invitation/accept" />
793
- <data android:host="${FRONTEGG_DOMAIN_2}"
794
- android:pathPrefix="/oauth/account/reset-password" />
795
- <data android:host="${FRONTEGG_DOMAIN_2}"
796
- android:pathPrefix="/oauth/account/login/magic-link" />
797
- </intent-filter>
798
- </activity>
799
-
800
- <activity android:exported="true" android:name="com.frontegg.android.AuthenticationActivity"
801
- tools:node="merge">
802
- <intent-filter android:autoVerify="true">
803
- <action android:name="android.intent.action.VIEW" />
804
-
805
- <category android:name="android.intent.category.DEFAULT" />
806
- <category android:name="android.intent.category.BROWSABLE" />
807
-
808
- <!-- DONT NOT COMBINE THE FOLLOWING LINES INTO ONE LINE-->
809
- <data
810
- android:host="${FRONTEGG_DOMAIN_2}"
811
- android:pathPrefix="/oauth/account/redirect/android/${package_name}"
812
- android:scheme="https" />
813
- </intent-filter>
814
- <intent-filter>
815
- <action android:name="android.intent.action.VIEW" />
816
-
817
- <category android:name="android.intent.category.DEFAULT" />
818
- <category android:name="android.intent.category.BROWSABLE" />
819
-
820
- <data
821
- android:host="${FRONTEGG_DOMAIN_2}"
822
- android:scheme="${package_name}" />
823
- </intent-filter>
824
- </activity>
825
- </application>
826
- ```
827
-
828
- ## Multi-apps Support
829
-
830
- This guide outlines the steps to configure your application to support multiple applications.
831
-
832
- ### Step 1: Add application id to your Frontegg configuration
833
-
834
- Add `applicationId` to your Frontegg configuration in `capacitor.config.ts` file:
835
-
836
- Find example code in [example/capacitor.config.ts](example/capacitor.config.ts) file.
837
-
838
-
839
- ```typescript
840
- import { CapacitorConfig } from '@capacitor/cli';
841
-
842
- const config: CapacitorConfig = {
843
- /*...*/
844
- plugins: {
845
-
846
- /*...*/
847
-
848
- FronteggNative: {
849
- baseUrl: 'https://{FRONTEGG_DOMAIN_HOST.com}',
850
- clientId: '{FRONTEGG_CLIENT_ID}',
851
- applicationId: '{FRONTEGG_APPLICATION_ID}',
852
- }
853
- }
854
- };
855
-
856
- export default config;
857
- ```
858
-
859
- Or add `applicationId` to the `regions`:
860
-
861
- ```typescript
862
- import { CapacitorConfig } from '@capacitor/cli';
863
-
864
- const config: CapacitorConfig = {
865
- /*...*/
866
- plugins: {
867
-
868
- /*...*/
869
-
870
- FronteggNative: {
871
-
872
- /** Remove baseUrl and clientId from here */
873
- // baseUrl: 'https://{FRONTEGG_DOMAIN_HOST.com}',
874
- // clientId: '{FRONTEGG_CLIENT_ID}',
875
- // applicationId: '{FRONTEGG_APPLICATION_ID}',
876
-
877
- regions: [ {
878
- key: 'REGION_1_KEY',
879
- baseUrl: 'https://region1.forntegg.com',
880
- clientId: 'REGION_1_CLIEND_ID',
881
- applicationId: '{FRONTEGG_REGION_1_APPLICATION_ID}'
882
- }, {
883
- key: 'REGION_2_KEY',
884
- baseUrl: 'https://region2.forntegg.com',
885
- clientId: 'REGION_2_CLIEND_ID',
886
- applicationId: '{FRONTEGG_REGION_2_APPLICATION_ID}',
887
- } ]
888
- }
889
- }
890
- };
891
-
892
- export default config;
893
- ```