SimpliciAuthAngularIonic

SimpliciAuthAngularIonic is a powerful Angular library designed to seamlessly integrate social authentication into your Ionic/Angular applications. It supports a wide range of providers including Google, Microsoft, Facebook, and Apple, with optimized compatibility for both web and native mobile platforms (iOS/Android) using Capacitor or Cordova.

🔐 Key Features:

• Social Login Support: Easily integrate SSO with Google, Microsoft, Facebook, Apple, and more.
• Mobile + Web Ready: Works out of the box for browser-based apps and native mobile builds.
• Email/Mobile Authentication: Supports user sign-in and sign-up using mobile number or email, in addition to SSO.
• Customizable UI: Easily style or replace default components for a tailored authentication experience.
• Token Management: Secure token handling with built-in support for access and refresh tokens.
• Lightweight

Installation

Install the package in your Angular/Ionic project:

npm install simplici-auth-angular-ionic

Usage

Import the module and use the component in your app:

// app.module.ts
import { SimpliciAuthAngularIonicModule } from 'simplici-auth-angular-ionic';

@NgModule({
  imports: [
    // ... other imports
    SimpliciAuthAngularIonicModule,
  ],
})
export class AppModule {}

Add the component to your template:

<!-- app.component.html -->
<simplici-auth-angular-ionic
  [googleRedirectUrl]="'com.googleusercontent.apps.YOUR_CLIENT_ID'"
  [microsoftRedirectUrl]="'msauth.YOUR_MICROSOFT_CLIENT_ID://auth/callback'"
  [appleRedirectUrl]="'com.satschel.auth://apple/callback'"
  (onStepChange)="onStepChange($event)"
  (onComplete)="onComplete($event)"
  (onError)="onError($event)"
></simplici-auth-angular-ionic>

iOS Setup

1. Register your custom URL scheme:
   • Open ios/App/App/Info.plist and add your URL schemes under CFBundleURLTypes:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>com.satschel.auth</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.googleusercontent.apps.YOUR_CLIENT_ID</string>
      <string>msauth.YOUR_MICROSOFT_CLIENT_ID</string>
      <string>fbYOUR_FACEBOOK_ID</string>
      <string>com.satschel.auth</string>
    </array>
  </dict>
</array>

2. Update capacitor.config.ts:
   • Set your custom scheme for iOS:

// capacitor.config.ts
const config = {
  ios: {
    scheme: 'com.googleusercontent.apps.YOUR_CLIENT_ID',
  },
  // ... other config
};
export default config;

3. Sync and rebuild your app:

npx cap sync ios
npx cap open ios

Android Setup

1. Register your custom scheme in AndroidManifest.xml:
   • Open android/app/src/main/AndroidManifest.xml and add an intent filter inside the <activity> tag for your main activity:

<intent-filter>
  <action android:name="android.intent.action.VIEW" />
  <category android:name="android.intent.category.DEFAULT" />
  <category android:name="android.intent.category.BROWSABLE" />
  <data android:scheme="com.googleusercontent.apps.YOUR_CLIENT_ID" android:host="auth" android:path="/callback" />
</intent-filter>

2. Update capacitor.config.ts:
   • Set your custom scheme for Android:

// capacitor.config.ts
const config = {
  android: {
    scheme: 'com.googleusercontent.apps.YOUR_CLIENT_ID',
  },
  // ... other config
};
export default config;

3. Sync and rebuild your app:

npx cap sync android
npx cap open android

4. Google OAuth Setup for Android:
   • In the Google Cloud Console, create an OAuth client for Android.
   • Add the redirect URI: com.googleusercontent.apps.YOUR_CLIENT_ID:/auth/callback
   • Download the google-services.json and place it in android/app/.

Google OAuth Setup

1. Create an OAuth Client in Google Cloud Console:

   • Type: iOS and/or Android
   • Bundle ID (iOS): io.ionic.starter (or your app's bundle ID)
   • Package Name (Android): your.package.name
   • Add the redirect URI: com.googleusercontent.apps.YOUR_CLIENT_ID:/auth/callback

2. Update your GoogleService-Info.plist (iOS) or google-services.json (Android):

   • Download from Google Cloud Console and place in the appropriate directory.

3. Set the Google redirect URL in your component:

<simplici-auth-angular-ionic
  [googleRedirectUrl]="'com.googleusercontent.apps.YOUR_CLIENT_ID'"
  ...
></simplici-auth-angular-ionic>

4. Handle the OAuth callback in your app:
   • The library will automatically handle the callback and emit events for success, error, and step changes.

Example: Handling Events

onStepChange(event: any) {
  console.log('Step changed:', event);
}
onComplete(event: any) {
  console.log('Auth complete:', event);
}
onError(error: any) {
  console.error('Auth error:', error);
}

Additional Resources

• For more information on using the Angular CLI, see the Angular CLI Overview and Command Reference.