{"templateId":"markdown","sharedDataIds":{},"props":{"metadata":{"markdoc":{"tagList":["InteractiveLink","Notification","LightboxImage","CodeBlockCustom","CodeItem"]},"type":"markdown"},"seo":{"title":"Ionic Capacitor quickstart","siteUrl":"https://developers.frontegg.com/","llmstxt":{"title":"Frontegg Developer Documentation","description":"Authentication, authorization, and user management for Customer Identity, plus Agen for SaaS and Agen for Work. Guides, SDKs, and API references.","sections":[{"title":"Customer Identity (CIAM)","description":"Auth, SSO, SCIM, entitlements, and user management — guides, SDKs, and APIs.","includeFiles":["ciam/**/*.md"],"excludeFiles":[]},{"title":"Agen for SaaS","description":"Agentic access and authorization for SaaS products.","includeFiles":["agen-for-saas/**/*.md"],"excludeFiles":[]},{"title":"Agen for Work","description":"Agentic access and authorization for internal and workforce use.","includeFiles":["agen-for-work/**/*.md"],"excludeFiles":[]},{"title":"Platform","description":"Shared platform overview.","includeFiles":["platform/**/*.md"],"excludeFiles":[]}],"excludeFiles":["internal-docs/**","ciam/guides/env-settings/inject-client-ip.md","CLAUDE.md",".claude/**","**/images/**"],"hide":false}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"ionic-capacitor-quickstart","__idx":0},"children":["Ionic Capacitor quickstart"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This guide is a walkthrough on how to integrate Frontegg’s authentication magic into your app using the Frontegg Ionic Capacitor (Angular)) SDK. Whether you need to add secure sign-ups, logins, multi-factor authentication, or even social logins, this guide has you covered with simple, step-by-step instructions to get things rolling in no time."]},{"$$mdtype":"Tag","name":"InteractiveLink","attributes":{"href":"https://github.com/frontegg/frontegg-ionic-capacitor","target":"_blank","justifyContent":"center"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Check out the sample package on GitHub"]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Prerequisites","type":"attention"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Frontegg Hosted Login is required, and setting a ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/ciam/guides/env-settings/custom-domain"},"children":["custom domain"]}," is highly recommended.",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"iOS ≥ 14",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Android ≥ 26"]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"prepare-frontegg-workspace","__idx":1},"children":["Prepare Frontegg workspace"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Navigate to ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://portal.frontegg.com/development/settings"},"children":["Frontegg Portal Settings"]},", If you don't have application",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"follow the integration steps after signing up. Copy ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FronteggDomain"]}," to future steps from ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://portal.frontegg.com/development/settings/domains"},"children":["Frontegg Portal Domain"]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"LightboxImage","attributes":{"isLightbox":true},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"img","attributes":{"src":"/assets/new-frontegg-domain.60f517108b4c93feb0326bd54894cfac97dcc0d10d29d12eb2cf4ef068816e5f.14341b2b.png","alt":"frontegg-domain"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"setup-hosted-login","__idx":2},"children":["Setup hosted login"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Navigate to ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://portal.frontegg.com/development/authentication/hosted"},"children":["Login Method Settings"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Toggle Hosted login method for iOS:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{{IOS_BUNDLE_IDENTIFIER}}://{{FRONTEGG_BASE_URL}}/ios/oauth/callback"]}]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Toggle Hosted login method for Android:",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["{{ANDROID_PACKAGE_NAME}}://{{FRONTEGG_BASE_URL}}/android/oauth/callback"]}," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["(without assetlinks)"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://{{FRONTEGG_BASE_URL}}/{{ANDROID_PACKAGE_NAME}}/android/oauth/callback"]}," ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["(required for assetlinks)"]}]}]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Replace ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["IOS_BUNDLE_IDENTIFIER"]}," with your application identifier"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Replace ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FRONTEGG_BASE_URL"]}," with your Frontegg base url, without ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["https"]},", i.e ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["FronteggDomain"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Replace ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ANDROID_PACKAGE_NAME"]}," with your android package name"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"add-frontegg-package-to-the-project","__idx":3},"children":["Add Frontegg package to the project"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add capacitor to the ionic project if it does not exist:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["bash","npm","yarn"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"ionic integrations enable capacitor\n"},"children":[]}]},{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"npm install -s @frontegg/react-native\n"},"children":[]}]},{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"yarn add @frontegg/react-native\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"configure-your-application","__idx":4},"children":["Configure your application"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create or Modify your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["capacitor.config.ts"]}," file:"]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import { CapacitorConfig } from \"@capacitor/cli\";\n\nconst config: CapacitorConfig = {\n  appId: \"{YOUR_APPLICATION_ID}\",\n  appName: \"{YOUR_APPLICATION_NAME}\",\n  webDir: \"www\",\n  server: {\n    androidScheme: \"https\",\n  },\n  ios: {\n    path: \"ios\",\n  },\n  android: {\n    path: \"android\",\n  },\n\n  plugins: {\n    FronteggNative: {\n      baseUrl: \"https://{FRONTEGG_DOMAIN_HOST.com}\",\n      clientId: \"{FRONTEGG_CLIENT_ID}\",\n    },\n  },\n};\n\nexport default config;\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add the iOS and Android projects to your ionic app by running the following commands:"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["NOTE: skip the command if you already have the project added."]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["bash"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"ionic capacitor add android\nionic capacitor add ios\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"setup-ios-project","__idx":5},"children":["Setup iOS project"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create Frontegg plist file, to setup your SwiftUI application to communicate with Frontegg."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Open the ios folder created by capacitor, and run this command:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["bash"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"ionic capacitor open ios\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["or open the Xcode manually."]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create a new file named ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Frontegg.plist"]}," under your root project directory, this file will store values to be used as variables by Frontegg SDK:"]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["xml"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n   <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">\n   <plist version=\"1.0\">\n   <dict>\n       <key>lateInit</key>\n       <true/>\n   </dict>\n   </plist>\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":3},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Enable ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["CODE_SIGNING_ALLOWED"]}," in the Podfile under ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["/ios/App"]}," folder."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To handle Login with magic link and other authentication methods that require to open the app with a URL, you have to add the following code to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AppDelegate.swift"]}," file."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["swift"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import UIKit\nimport Capacitor\nimport FronteggSwift\n\n@UIApplicationMain\nclass AppDelegate: UIResponder, UIApplicationDelegate {\n\n    /*\n     * Called when the app was launched with a url. Feel free to add additional processing here,\n     * but if you want the App API to support tracking app url opens, make sure to keep this call\n     */\n    func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {\n        \n        if(FronteggAuth.shared.handleOpenUrl(url)){\n            return true\n        }\n        \n        return ApplicationDelegateProxy.shared.application(app, open: url, options: options)\n    }\n    \n    /*\n     * Called when the app was launched with an activity, including Universal Links.\n     * Feel free to add additional processing here, but if you want the App API to support\n     * tracking app url opens, make sure to keep this call\n     */\n    func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {\n        \n        if let url = userActivity.webpageURL {\n            if(FronteggAuth.shared.handleOpenUrl(url)){\n                return true\n            }\n        }\n        return ApplicationDelegateProxy.shared.application(application, continue: userActivity, restorationHandler: restorationHandler)\n    }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"configure-ios-associated-domain","__idx":6},"children":["Configure iOS associated domain"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configuring your iOS associated domain is required for Magic Link authentication / Reset Password / Activate Account."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In order to add your iOS associated domain to your Frontegg application, you will need to update in each of your",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"integrated Frontegg Environments the iOS associated domain that you would like to use with that Environment. Send a POST request to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://api.frontegg.com/vendors/resources/associated-domains/v1/ios"]}," with the following payload:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["cURL"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"{\n    \"appId\":[YOUR_ASSOCIATED_DOMAIN]\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["In order to use our API’s, follow ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"/ciam/api/overview"},"children":["this guide"]}," to generate a vendor token."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"setup-android-project","__idx":7},"children":["Setup Android project"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Set minimum sdk version - open root gradle file at",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["android/variables.gradle"]}," and modify the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["minSdkVersion"]}," to 26."]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["groovy"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"ext {\n minSdkVersion = 26\n ...\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Configure build config fields - To set up your Android application on to communicate with Frontegg, you have to add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["buildConfigField"]}," property the  gradle ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["android/app/build.gradle"]},". This property will store frontegg hostname (without https) and client id from previous step:"]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["groovy"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"\ndef fronteggDomain = \"FRONTEGG_DOMAIN_HOST.com\" // without protocol https://\ndef fronteggClientId = \"FRONTEGG_CLIENT_ID\"\n\nandroid {\n    defaultConfig {\n\n        manifestPlaceholders = [\n                \"package_name\" : applicationId,\n                \"frontegg_domain\" : fronteggDomain,\n                \"frontegg_client_id\": fronteggClientId\n        ]\n    }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bundleConfig=true"]}," if not exists inside the android section inside the app gradle ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["android/app/build.gradle"]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["groovy"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"android {\n  buildFeatures {\n    buildConfig = true\n  }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":3},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add permissions to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AndroidManifest.xml"]}," - Add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["INTERNET"]}," permission to the app's manifest file."]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["xml"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"<uses-permission android:name=\"android.permission.INTERNET\"/>\n<uses-permission android:name=\"android.permission.POST_NOTIFICATIONS\"/>\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":4},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Configure Android ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AssetLinks"]}," for Magic Link authentication / Reset Password / Activate Account / login with external IdPs."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To add your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AssetLinks"]}," to your Frontegg application, you will need to update in each of your integrated Frontegg",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"Environments the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AssetLinks"]}," that you would like to use with that Environment. Send a POST request to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://api.frontegg.com/vendors/resources/associated-domains/v1/android"]}," with the following payload:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["cURL"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"{\n    \"packageName\": \"YOUR_APPLICATION_PACKAGE_NAME\",\n    \"sha256CertFingerprints\": [\"YOUR_KEYSTORE_CERT_FINGERPRINTS\"]\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Each Android app has multiple certificate fingerprint, to get your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["DEBUG"]}," sha256CertFingerprint you have to run the below command. For Debug mode, run the following command and copy the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["SHA-256"]}," value:"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["NOTE:"]}," make sure to choose the Variant and Config equals to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["debug"]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["bash"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"./gradlew signingReport\n\n###################\n#  Example Output:\n###################\n\n#  Variant: debug\n#  Config: debug\n#  Store: /Users/davidfrontegg/.android/debug.keystore\n#  Alias: AndroidDebugKey\n#  MD5: 25:F5:99:23:FC:12:CA:10:8C:43:F4:02:7D:AD:DC:B6\n#  SHA1: FC:3C:88:D6:BF:4E:62:2E:F0:24:1D:DB:D7:15:36:D6:3E:14:84:50\n#  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\n#  Valid until: Tuesday, 18 June 2052\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For Release mode, Extract the SHA256 using keytool from your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Release"]}," keystore file:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["bash"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"keytool -list -v -keystore /PATH/file.jks -alias YourAlias -storepass *** -keypass ***\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"enabling-chrome-custom-tabs-for-social-login","__idx":8},"children":["Enabling chrome custom tabs for social login"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To enable social login via Chrome Custom Tabs in Android application, modify your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["capacitor.config.ts"]}," file and set the useChromeCustomTabs flag to true . By default, the SDK uses the Chrome browser for social login."]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import { CapacitorConfig } from \"@capacitor/cli\";\n\nconst config: CapacitorConfig = {\n  appId: \"{YOUR_APPLICATION_ID}\",\n  appName: \"{YOUR_APPLICATION_NAME}\",\n  webDir: \"www\",\n  server: {\n    androidScheme: \"https\",\n  },\n  ios: {\n    path: \"ios\",\n  },\n  android: {\n    path: \"android\",\n  },\n\n  plugins: {\n    FronteggNative: {\n      baseUrl: \"https://{FRONTEGG_DOMAIN_HOST.com}\",\n      clientId: \"{FRONTEGG_CLIENT_ID}\",\n\n      useChromeCustomTabs: true,\n    },\n  },\n};\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"multi-region-support","__idx":9},"children":["Multi-region support"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This guide outlines the steps to configure your Ionic application to support multiple regions."]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["region"]}," to your Frontegg configuration in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["capacitor.config.ts"]}," file."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Find example code in ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://github.com/frontegg/frontegg-ionic-capacitor/blob/master/example/capacitor.config.ts"},"children":["example/capacitor.config.ts"]}," file."]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typesecript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import { CapacitorConfig } from '@capacitor/cli';\n\nconst config: CapacitorConfig = {\n  /*...*/\n  plugins: {\n\n    /*...*/\n\n    FronteggNative: {\n      \n      /** Remove baseUrl and clientId from here */\n      // baseUrl: 'https://{FRONTEGG_DOMAIN_HOST.com}',\n      // clientId: '{FRONTEGG_CLIENT_ID}',\n      \n      regions: [ {\n        key: 'REGION_1_KEY',\n        baseUrl: 'https://region1.forntegg.com',\n        clientId: 'REGION_1_CLIEND_ID',\n      }, {\n        key: 'REGION_2_KEY',\n        baseUrl: 'https://region2.forntegg.com',\n        clientId: 'REGION_2_CLIEND_ID',\n      } ]\n    }\n  }\n};\n\nexport default config;\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create region guard service."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Create region guard service, this guard will prevent application init if region not selected, and checks if specific region selected by getting the native state from the Frontegg SDK. If the region not exists, the guard will redirect to region selector page."]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Find example code in ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://github.com/frontegg/frontegg-ionic-capacitor/blob/master/example/src/app/region.guard.ts"},"children":["example/src/app/region.guard.ts"]}," file."]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typesecript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import { CanActivateFn, Router } from '@angular/router';\nimport { Inject, Injectable } from '@angular/core';\nimport { FronteggService } from '@frontegg/ionic-capacitor';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class RegionGuard {\n  constructor(@Inject('Frontegg') private fronteggService: FronteggService, private router: Router) {\n    /**\n     * Listens to $isAuthenticated changes\n     * Reload the page to trigger canActivate function again\n     */\n    this.fronteggService.$selectedRegion.subscribe(async () => {\n      window.location.reload()\n    });\n  }\n\n  canActivate: CanActivateFn = async () => {\n    const { isRegional } = await this.fronteggService.getConstants();\n    const nativeState = await this.fronteggService.getNativeState()\n\n    if (!isRegional || nativeState.selectedRegion != null) {\n      /**\n       * region already selected, activate navigation\n       */\n      return true\n    }\n\n    /**\n     * region not selected, redirect to region selector page\n     */\n    return this.router.navigate([ '/select-region' ])\n  }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":3},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add region guard to application router."," ","Find example code in ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://github.com/frontegg/frontegg-ionic-capacitor/blob/master/example/src/app/app-routing.module.ts"},"children":["example/src/app/app-routing.module.ts"]}," file."]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typesecript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"const routes: Routes = [\n  {\n    path: '',\n    canActivate: [ RegionGuard ],\n    children: [\n      /**\n       * Wrap all routes with region guard\n       * to redirect to region selector page\n       * if region not exists\n       */\n      {\n        path: '',\n        canActivate: [ AuthGuard ],\n        loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)\n      },\n    ]\n  }, {\n    /**\n     * Add region selector page\n     * to select region if not exists\n     */\n    path: 'select-region',\n    component: SelectRegionComponent\n  }\n];\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":4},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Setup multi-region support for iOS Platform"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following guide outlines the steps to configure an iOS application to support multiple regions."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["First, adjust your Frontegg.plist file for multiple regions:"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Remove the existing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["baseUrl"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["clientId"]}," keys."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Add a new boolean property, ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["lateInit"]},", and set it to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Frontegg.plist"]}," structure:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["xml"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n  <!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\" \"http://www.apple.com/DTDs/PropertyList-1.0.dtd\">\n  <plist version=\"1.0\">\n  <dict>  \n    <key>lateInit</key>\n    <true/>\n  </dict>\n  </plist>\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Secondly, add associated domains for each region:"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure the associated domains for each region in your application's settings. This step is crucial for correct API routing and authentication. Follow the guide ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"#configure-ios-associated-domain"},"children":["Configure iOS Associated Domain"]}," to add your iOS associated domain to your Frontegg application."]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":5},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Setup multi-region support for Android Platform"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following guide outlines the steps to configure an Android application to support multiple regions."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["First, modify the Build.gradle file"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["remove buildConfigFields from your build.gradle file: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["legacy"]}]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["groovy"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"android {\n  //  remove this lines:\n  //  buildConfigField \"String\", 'FRONTEGG_DOMAIN', \"\\\"$fronteggDomain\\\"\"\n  //  buildConfigField \"String\", 'FRONTEGG_CLIENT_ID', \"\\\"$fronteggClientId\\\"\"\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Secondly, add AssetLinks for each region:"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For each region, configuring your Android ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AssetLinks"]},". This is vital for proper API routing and authentication. Follow the steps for configuring Android AssetLinks to add your Android domains to your Frontegg application."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Lastly, add intent-filter in Manifest.xml:"]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The first domain will be placed automatically in the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["AndroidManifest.xml"]}," file. For each additional region, you will",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"need to add an ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["intent-filter"]},". Replace ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["${FRONTEGG_DOMAIN_2}"]}," with the second domain from the previous step."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["NOTE:"]}," if you are using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Custom Chrome Tab"]}," you have to use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["android:name"]}," ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["com.frontegg.android.HostedAuthActivity"]}," instead of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["com.frontegg.android.EmbeddedAuthActivity"]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["groovy"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"<application>\n    <activity android:exported=\"true\" android:name=\"com.frontegg.android.EmbeddedAuthActivity\"\n              tools:node=\"merge\">\n        <intent-filter android:autoVerify=\"true\">\n            <action android:name=\"android.intent.action.VIEW\" />\n\n            <category android:name=\"android.intent.category.DEFAULT\" />\n            <category android:name=\"android.intent.category.BROWSABLE\" />\n\n            <data android:scheme=\"https\" />\n            <!-- DO NOT COMBINE THE FOLLOWING LINES INTO ONE LINE OR SPLIT TO MULTIPLE -->\n            <data android:host=\"${FRONTEGG_DOMAIN_2}\"\n                  android:pathPrefix=\"/oauth/account/activate\" />\n            <data android:host=\"${FRONTEGG_DOMAIN_2}\"\n                  android:pathPrefix=\"/oauth/account/invitation/accept\" />\n            <data android:host=\"${FRONTEGG_DOMAIN_2}\"\n                  android:pathPrefix=\"/oauth/account/reset-password\" />\n            <data android:host=\"${FRONTEGG_DOMAIN_2}\"\n                  android:pathPrefix=\"/oauth/account/login/magic-link\" />\n        </intent-filter>\n    </activity>\n\n    <activity android:exported=\"true\" android:name=\"com.frontegg.android.AuthenticationActivity\"\n              tools:node=\"merge\">\n            <intent-filter android:autoVerify=\"true\">\n                <action android:name=\"android.intent.action.VIEW\" />\n\n                <category android:name=\"android.intent.category.DEFAULT\" />\n                <category android:name=\"android.intent.category.BROWSABLE\" />\n\n                <!-- DONT NOT COMBINE THE FOLLOWING LINES INTO ONE LINE-->\n                <data\n                    android:host=\"${FRONTEGG_DOMAIN_2}\"\n                    android:pathPrefix=\"/oauth/account/redirect/android/${package_name}\"\n                    android:scheme=\"https\" />\n            </intent-filter>\n            <intent-filter>\n                <action android:name=\"android.intent.action.VIEW\" />\n\n                <category android:name=\"android.intent.category.DEFAULT\" />\n                <category android:name=\"android.intent.category.BROWSABLE\" />\n\n                <data\n                    android:host=\"${FRONTEGG_DOMAIN_2}\"\n                    android:scheme=\"${package_name}\" />\n            </intent-filter>\n    </activity>\n</application>\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"multi-apps-support","__idx":10},"children":["Multi-apps support"]},{"$$mdtype":"Tag","name":"Notification","attributes":{"title":"Prerequisites","type":"attention"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The use of this feature requires minimum @frontegg/ionic@2.0.8"]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This guide outlines the steps to configure your application to support multiple applications."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Find example code in ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://github.com/frontegg/frontegg-ionic-capacitor/blob/master/example/capacitor.config.ts"},"children":["example/capacitor.config.ts"]}," file."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applicationId"]}," to your Frontegg configuration"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import { CapacitorConfig } from '@capacitor/cli';\n\nconst config: CapacitorConfig = {\n/*...*/\nplugins: {\n\n    /*...*/\n\n    FronteggNative: {\n        baseUrl: 'https://{FRONTEGG_DOMAIN_HOST.com}',\n        clientId: '{FRONTEGG_CLIENT_ID}',\n        applicationId: '{FRONTEGG_APPLICATION_ID}',\n    }\n}\n};\n\nexport default config;\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Or add ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["applicationId"]}," to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["regions"]},":"]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typescript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import { CapacitorConfig } from '@capacitor/cli';\n\nconst config: CapacitorConfig = {\n  /*...*/\n  plugins: {\n\n    /*...*/\n\n    FronteggNative: {\n      \n      /** Remove baseUrl and clientId from here */\n      // baseUrl: 'https://{FRONTEGG_DOMAIN_HOST.com}',\n      // clientId: '{FRONTEGG_CLIENT_ID}',\n      // applicationId: '{FRONTEGG_APPLICATION_ID}',\n      \n      regions: [ {\n        key: 'REGION_1_KEY',\n        baseUrl: 'https://region1.forntegg.com',\n        clientId: 'REGION_1_CLIEND_ID', \n        applicationId: '{FRONTEGG_REGION_1_APPLICATION_ID}'\n      }, {\n        key: 'REGION_2_KEY',\n        baseUrl: 'https://region2.forntegg.com',\n        clientId: 'REGION_2_CLIEND_ID', \n        applicationId: '{FRONTEGG_REGION_2_APPLICATION_ID}',\n      } ]\n    }\n  }\n};\n\nexport default config;\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"embedded-webview-vs-hosted","__idx":11},"children":["Embedded webview vs hosted"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Frontegg SDK supports two authentication methods:"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Embedded Webview"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Hosted Webview",{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["iOS"]},": ASWebAuthenticationSession"]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Android"]},": By default, Frontegg SDK will use Embedded Webview."]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"enable-hosted-webview-in-ios-platform","__idx":12},"children":["Enable hosted webview in iOS platform"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["ASWebAuthenticationSession"]}," you have to set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["embeddedMode"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["NO"]}," in ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Frontegg.plist"]}," file:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["xml"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<!DOCTYPE plist PUBLIC \"-//Apple//DTD PLIST 1.0//EN\">\n<plist version=\"1.0\">\n    <dict>\n        <key>lateInit</key>\n        <true/>\n        <!-- START -->\n        <key>embeddedMode</key>\n        <false/>\n        <!-- END -->\n    </dict>\n</plist>\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"enable-hosted-webview-in-android-platform","__idx":13},"children":["Enable hosted webview in Android platform"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To use Custom Chrome Tab you have to set disable embedded activity by adding below code to",{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},"the application manifest:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["xml"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"<manifest xmlns:android=\"http://schemas.android.com/apk/res/android\"\n          xmlns:tools=\"http://schemas.android.com/tools\">\n    <application>\n        <!-- ... -->\n\n        <activity android:name=\"com.frontegg.android.EmbeddedAuthActivity\" tools:replace=\"android:enabled\"\n                  android:enabled=\"false\"/>\n        <activity android:name=\"com.frontegg.android.HostedAuthActivity\" tools:replace=\"android:enabled\"\n                  android:enabled=\"true\"/>\n\n        <!-- ... -->\n    </application>\n</manifest>\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"integrate-frontegg","__idx":14},"children":["Integrate Frontegg"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Open the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src/app/app.module.ts"]}," file and add the following line to the before ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@NgModule"]}," section:"]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typesecript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import { FronteggService } from '@frontegg/ionic-capacitor';\n\n@NgModule({\n  // ...\n  providers: [ {\n    provide: 'Frontegg',\n    useValue: new FronteggService(),\n  } ]\n  // ...\n})\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"protect-application-poutes","__idx":15},"children":["Protect application poutes"]},{"$$mdtype":"Tag","name":"ol","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Create AuthGuard file ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src/app/auth.guard.ts"]},":"]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typesecript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import { CanActivateFn } from '@angular/router';\n   import { Inject, Injectable } from '@angular/core';\n   import { FronteggService } from '@frontegg/ionic-capacitor';\n\n\n   @Injectable({\n     providedIn: 'root'\n   })\n   export class AuthGuard {\n\n     constructor(@Inject('Frontegg') private fronteggService: FronteggService) {\n\n       /**\n        * Listens to $isAuthenticated changes\n        * Reload the page to trigger canActivate function again\n        */\n       this.fronteggService.$isAuthenticated.subscribe(async () => {\n         window.location.reload()\n       });\n\n      /**\n        * Listens to application visibility changes\n        * Reload the page to trigger canActivate\n        * when application returns from login page without authentication\n        */\n       document.addEventListener('visibilitychange', () => {\n         if (document.visibilityState === 'visible' && !this.fronteggService.getState().isAuthenticated) {\n           window.location.reload()\n         }\n       });\n     }\n\n     /**\n      * Wait for loader to finish\n      * @private\n      */\n     private waitForLoader() {\n       return new Promise((resolve) => {\n         const unsubscribe = this.fronteggService.$isLoading\n           .subscribe((isLoading) => {\n             if (!isLoading) {\n               resolve(true);\n               unsubscribe();\n             }\n           });\n       })\n     }\n\n     /**\n      * Navigate to login page if user is not authenticated\n      * @private\n      */\n     private async navigateToLoginIfNeeded(): Promise<boolean> {\n       const { isAuthenticated } = this.fronteggService.getState();\n       if (!isAuthenticated) {\n         await this.fronteggService.login()\n         return false /** prevent navigation */\n       }\n       return true /** activate navigation */\n     }\n\n\n     canActivate: CanActivateFn = () => {\n       const { showLoader } = this.fronteggService.getState();\n\n       if (!showLoader) {\n         /**\n          * if showLoader false\n          * check if user is authenticated\n          */\n         return this.navigateToLoginIfNeeded()\n       }\n\n       /**\n        * if showLoader true\n        * wait for loader to finish and then\n        * check if user is authenticated\n        */\n       return new Promise<boolean>(async (resolve) => {\n         await this.waitForLoader()\n         const activated = await this.navigateToLoginIfNeeded()\n         resolve(activated)\n       })\n     }\n   }\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"ol","attributes":{"start":2},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Open the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["src/app-routing.module.ts"]}," file and add wrap the app routes with loadChildren and apply CanActivate guard:"]}]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typesecript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import { AuthGuard } from './auth.guard';\n\nconst routes: Routes = [\n  {\n    path: '',\n    canActivate: [ AuthGuard ],\n    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)\n  },\n];\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"get-logged-in-user","__idx":16},"children":["Get logged in user"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Find full example under the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://github.com/frontegg/frontegg-ionic-capacitor/tree/master/example/src/app/tab1"},"children":["sample repo"]}," files."]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typesecript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import { Inject } from '@angular/core';\nimport { FronteggService, FronteggState } from '@frontegg/ionic-capacitor';\n\n@Component({\n  /** .... */\n})\nexport class MyPage implements OnInit {\n\n  constructor(private ngZone: NgZone, @Inject('Frontegg') private fronteggService: FronteggService) {\n  }\n\n  user: FronteggState['user'] = null\n  accessToken: string | null = null\n\n  ngOnInit() {\n    const { user, accessToken } = this.fronteggService.getState();\n    this.user = user;\n    this.user = accessToken;\n\n    this.fronteggService.$user.subscribe((user) => {\n      console.log('change user', user)\n      this.ngZone.run(() => this.user = user)\n    })\n    this.fronteggService.$accessToken.subscribe((accessToken) => {\n      console.log('change accessToken', accessToken)\n      this.ngZone.run(() => this.accessToken = accessToken)\n    })\n  }\n}\n"},"children":[]}]}]},{"$$mdtype":"Tag","name":"br","attributes":{},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"switch-users-tenant","__idx":17},"children":["Switch user's tenant"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Find full example under the ",{"$$mdtype":"Tag","name":"a","attributes":{"href":"https://github.com/frontegg/frontegg-ionic-capacitor/tree/master/example/src/app/tab2"},"children":["sample repo"]}," files."]},{"$$mdtype":"Tag","name":"CodeBlockCustom","attributes":{"tabs":["typesecript"]},"children":[{"$$mdtype":"Tag","name":"CodeItem","attributes":{},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"header":{"controls":{"copy":{}}},"source":"import { Inject } from '@angular/core';\nimport { FronteggService, FronteggState } from '@frontegg/ionic-capacitor';\n\n@Component({\n  /** .... */\n})\nexport class MyPage implements OnInit {\n\n  constructor(private ngZone: NgZone, @Inject('Frontegg') private fronteggService: FronteggService) {\n  }\n\n  user: FronteggState['user'] = null\n  accessToken: string | null = null\n\n  ngOnInit() {\n    const { user } = this.fronteggService.getState();\n    this.user = user;\n    this.fronteggService.$user.subscribe((user) => {\n      this.ngZone.run(() => this.user = user)\n    })\n  }\n\n\n  switchTenant(tenantId: string) {\n    this.fronteggService.switchTenant(tenantId)\n  }\n}\n"},"children":[]}]}]}]},"headings":[{"value":"Ionic Capacitor quickstart","id":"ionic-capacitor-quickstart","depth":2},{"value":"Prepare Frontegg workspace","id":"prepare-frontegg-workspace","depth":3},{"value":"Setup hosted login","id":"setup-hosted-login","depth":3},{"value":"Add Frontegg package to the project","id":"add-frontegg-package-to-the-project","depth":3},{"value":"Configure your application","id":"configure-your-application","depth":3},{"value":"Setup iOS project","id":"setup-ios-project","depth":3},{"value":"Configure iOS associated domain","id":"configure-ios-associated-domain","depth":4},{"value":"Setup Android project","id":"setup-android-project","depth":3},{"value":"Enabling chrome custom tabs for social login","id":"enabling-chrome-custom-tabs-for-social-login","depth":4},{"value":"Multi-region support","id":"multi-region-support","depth":3},{"value":"Multi-apps support","id":"multi-apps-support","depth":3},{"value":"Embedded webview vs hosted","id":"embedded-webview-vs-hosted","depth":3},{"value":"Enable hosted webview in iOS platform","id":"enable-hosted-webview-in-ios-platform","depth":4},{"value":"Enable hosted webview in Android platform","id":"enable-hosted-webview-in-android-platform","depth":4},{"value":"Integrate Frontegg","id":"integrate-frontegg","depth":3},{"value":"Protect application poutes","id":"protect-application-poutes","depth":3},{"value":"Get logged in user","id":"get-logged-in-user","depth":3},{"value":"Switch user's tenant","id":"switch-users-tenant","depth":3}],"frontmatter":{"seo":{"title":"Ionic Capacitor quickstart"}},"lastModified":"2025-11-04T13:25:50.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/ciam/sdks/mobile/ionic-capacitor/login-old","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}