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 comp
npm install simplici-auth-angular-ionicSimpliciAuthAngularIonic 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
Install the package in your Angular/Ionic project:
``bash`
npm install simplici-auth-angular-ionic
Import the module and use the component in your app:
`typescript
// app.module.ts
import { SimpliciAuthAngularIonicModule } from 'simplici-auth-angular-ionic';
@NgModule({
imports: [
// ... other imports
SimpliciAuthAngularIonicModule,
],
})
export class AppModule {}
`
Add the component to your template:
`html`
[microsoftRedirectUrl]="'msauth.YOUR_MICROSOFT_CLIENT_ID://auth/callback'"
[appleRedirectUrl]="'com.satschel.auth://apple/callback'"
(onStepChange)="onStepChange($event)"
(onComplete)="onComplete($event)"
(onError)="onError($event)"
>
1. Register your custom URL scheme:
- Open ios/App/App/Info.plist and add your URL schemes under CFBundleURLTypes:
`xml`
2. Update capacitor.config.ts:
- Set your custom scheme for iOS:
`typescript`
// capacitor.config.ts
const config = {
ios: {
scheme: 'com.googleusercontent.apps.YOUR_CLIENT_ID',
},
// ... other config
};
export default config;
3. Sync and rebuild your app:
`bash`
npx cap sync ios
npx cap open ios
1. Register your custom scheme in AndroidManifest.xml:
- Open android/app/src/main/AndroidManifest.xml and add an intent filter inside the tag for your main activity:
`xml`
2. Update capacitor.config.ts:
- Set your custom scheme for Android:
`typescript`
// capacitor.config.ts
const config = {
android: {
scheme: 'com.googleusercontent.apps.YOUR_CLIENT_ID',
},
// ... other config
};
export default config;
3. Sync and rebuild your app:
`bash`
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 and place it in android/app/.
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)your.package.name
- Package Name (Android):
- Add the redirect URI:
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:
`html`
...
>
4. Handle the OAuth callback in your app:
- The library will automatically handle the callback and emit events for success, error, and step changes.
`typescript``
onStepChange(event: any) {
console.log('Step changed:', event);
}
onComplete(event: any) {
console.log('Auth complete:', event);
}
onError(error: any) {
console.error('Auth error:', error);
}
- For more information on using the Angular CLI, see the Angular CLI Overview and Command Reference.