Ionic Capacitor SDK
Frontegg's Mobile SDKs are officially here for you to explore and utilize. Our powerful and simple-to-implements SDKs are designed to empower you to create extraordinary mobile experiences. Whether you're developing for iOS, Android, React Native, or Ionic, we've got you covered.
Frontegg and Ionic Capacitor
Get ready to dive into the exciting world of mobile app development using Ionic and Frontegg. In this guide, we will delve into the integration of Frontegg's capabilities into Ionic applications, offering enhanced functionality and reinforced security.
Table of Contents
Project Requirements
- Minimum iOS deployment version => 14
- Min Android SDK => 26
Getting Started
Prepare Your Frontegg workspace
Navigate to Frontegg Portal Settings, If you don't have application
follow integration steps after signing up.
Copy FronteggDomain to future steps from Frontegg Portal Domain
Setup Your Hosted Login
- Navigate to Login Method Settings
- Toggle Hosted login method
- Add
{{IOS_BUNDLE_IDENTIFIER}}://{{FRONTEGG_BASE_URL}}/ios/oauth/callback
- Add
{{ANDROID_PACKAGE_NAME}}://{{FRONTEGG_BASE_URL}}/android/oauth/callback
- Replace
IOS_BUNDLE_IDENTIFIER
with your application identifier - Replace
FRONTEGG_BASE_URL
with your frontegg base url - Replace
ANDROID_PACKAGE_NAME
with your android package name
Add Frontegg's Package to Your Project
Add capacitor to the ionic project if not exists:
ionic integrations enable capacitor
Use a package manager npm/yarn to install frontegg React Native library.
NPM:
npm install -s @frontegg/react-native
Yarn:
yarn add @frontegg/react-native
Configure your application
-
Create or Modify your
capacitor.config.ts
file:import { CapacitorConfig } from '@capacitor/cli'; const config: CapacitorConfig = { appId: '{YOUR_APPLICATION_ID}', appName: '{YOUR_APPLICATION_NAME}', webDir: 'www', server: { androidScheme: 'https' }, ios: { path: 'ios', }, android: { path: 'android', }, }; export default config;
-
Add the iOS and Android projects to your ionic app by running the following commands:
NOTE: skip the command if you already have the project added.
ionic capacitor add android ionic capacitor add ios
Setup iOS Project
Create Frontegg plist file
To setup your SwiftUI application to communicate with Frontegg.
-
Open the ios folder created by capacitor, and run this command:
ionic capacitor open ios
or open the Xcode manually.
-
Create a new file named
Frontegg.plist
under your root project directory, this file will store values to be used variables by Frontegg SDK:<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>baseUrl</key> <string>https://[DOMAIN_HOST_FROM_PREVIOUS_STEP]</string> <key>clientId</key> <string>[CLIENT_ID_FROM_PREVIOUS_STEP]</string> </dict> </plist>
-
Enable
CODE_SIGNING_ALLOWED
in the Podfile under/ios/App
folder.
Config iOS associated domain
Configuring your iOS associated domain is required for Magic Link authentication / Reset Password / Activate Account.
In order to add your iOS associated domain to your Frontegg application, you will need to update in each of your integrated Frontegg Environments the iOS associated domain that you would like to use with that Environment. Send a POST request to https://api.frontegg.com/vendors/resources/associated-domains/v1/ios
with the following payload:
{
“appId”:[YOUR_ASSOCIATED_DOMAIN]
}
In order to use our API’s, follow this guide to generate a vendor token.
Setup Android Project
Setup Android Project
Set minimum sdk version
To set up your Android minimum sdk version, open root gradle file atandroid/variables.gradle
,
Modify the minSdkVersion to 26:
ext {
minSdkVersion = 26
...
}
Configure build config fields
To set up your Android application on to communicate with Frontegg, you have to add buildConfigField
property the gradle android/app/build.gradle
.
This property will store frontegg hostname (without https) and client id from previous step:
def fronteggDomain = "FRONTEGG_DOMAIN_HOST.com" // without protocol https://
def fronteggClientId = "FRONTEGG_CLIENT_ID"
android {
defaultConfig {
manifestPlaceholders = [
"package_name" : applicationId,
"frontegg_domain" : fronteggDomain,
"frontegg_client_id": fronteggClientId
]
buildConfigField "String", 'FRONTEGG_DOMAIN', "\"$fronteggDomain\""
buildConfigField "String", 'FRONTEGG_CLIENT_ID', "\"$fronteggClientId\""
}
}
Add bundleConfig=true if not exists inside the android section inside the app gradle android/app/build.gradle
android {
buildFeatures {
buildConfig = true
}
}
Add permissions to AndroidManifest.xml
Add INTERNET
permission to the app's manifest file.
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
Config Android AssetLinks
Configuring your Android AssetLinks
is required for Magic Link authentication / Reset Password / Activate Account /
login with IdPs.
To add your AssetLinks
to your Frontegg application, you will need to update in each of your integrated Frontegg
Environments the AssetLinks
that you would like to use with that Environment. Send a POST request
to https://api.frontegg.com/vendors/resources/associated-domains/v1/android
with the following payload:
{
"packageName": "YOUR_APPLICATION_PACKAGE_NAME",
"sha256CertFingerprints": ["YOUR_KEYSTORE_CERT_FINGERPRINTS"]
}
Each Android app has multiple certificate fingerprint, to get your DEBUG
sha256CertFingerprint you have to run the
following command:
For Debug mode, run the following command and copy the SHA-256
value
NOTE: make sure to choose the Variant and Config equals to debug
./gradlew signingReport
###################
# Example Output:
###################
# Variant: debug
# Config: debug
# Store: /Users/davidfrontegg/.android/debug.keystore
# Alias: AndroidDebugKey
# MD5: 25:F5:99:23:FC:12:CA:10:8C:43:F4:02:7D:AD:DC:B6
# SHA1: FC:3C:88:D6:BF:4E:62:2E:F0:24:1D:DB:D7:15:36:D6:3E:14:84:50
# 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
# Valid until: Tuesday, 18 June 2052
For Release mode, Extract the SHA256 using keytool from your Release
keystore file:
keytool -list -v -keystore /PATH/file.jks -alias YourAlias -storepass *** -keypass ***
In order to use our API’s, follow this guide to
generate a vendor token.
Usages
Ionic with Angular:
-
Open the
src/app/app.module.ts
file and add the following line to the before@NgModule
section:import { FronteggService } from '@frontegg/ionic-capacitor'; @NgModule({ // ... providers: [ { provide: 'Frontegg', useValue: new FronteggService(), }] // ... })
-
Find full example under
example/src/app/tab1
andexample/src/app/tab2
files.
Updated 5 months ago