@pixxle/oauth-ionic/templates/example-usage.ts

Pixxle OAuth authentication module for Ionic Angular applications - Direct implementation that works - Tested and proven

// Exemple d'utilisation complète des composants Pixxle OAuth

// 1. Configuration (src/oauth.config.ts)
export interface OAuthConfig {
  clientId: string;
  clientSecret: string;
  redirectUri: string;
  authUrl: string;
  tokenUrl: string;
  userInfoUrl: string;
  scope: string;
}

export const PIXXLE_OAUTH_CONFIG: OAuthConfig = {
  clientId: 'VOTRE_CLIENT_ID',
  clientSecret: 'VOTRE_CLIENT_SECRET',
  redirectUri: 'com.pixxle.oauth://callback',
  authUrl: 'https://www.pixxle.me/oauth/v2/authorize',
  tokenUrl: 'https://www.pixxle.me/v2/oauth/token',
  userInfoUrl: 'https://api.pixxle.me/api/access/user',
  scope: 'user.profile'
};

// 2. Configuration principale (main.ts)
import { bootstrapApplication } from '@angular/platform-browser';
import { providePixxleOAuth } from '@pixxle/oauth-ionic';
import { PIXXLE_OAUTH_CONFIG } from './oauth.config';

bootstrapApplication(AppComponent, {
  providers: [
    providePixxleOAuth(PIXXLE_OAUTH_CONFIG)
  ]
});

// 3. Page de connexion (login.page.ts)
import { Component } from '@angular/core';
import { PixxleLoginButtonComponent } from '@pixxle/oauth-ionic';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  standalone: true,
  imports: [
    PixxleLoginButtonComponent // ← IMPORTANT : Importer le composant
  ]
})
export class LoginPage {}

// 4. Template de connexion (login.page.html)
// <pixxle-login-button></pixxle-login-button>

// 5. Page d'accueil (home.page.ts)
import { Component } from '@angular/core';
import { PixxleUserProfileComponent } from '@pixxle/oauth-ionic';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  standalone: true,
  imports: [
    PixxleUserProfileComponent // ← IMPORTANT : Importer le composant
  ]
})
export class HomePage {}

// 6. Template d'accueil (home.page.html)
// <pixxle-user-profile></pixxle-user-profile>

// 7. Protection des routes (app.routes.ts)
import { Routes } from '@angular/router';
import { PixxleAuthGuard } from '@pixxle/oauth-ionic';

export const routes: Routes = [
  {
    path: 'login',
    loadComponent: () => import('./login/login.page').then(m => m.LoginPage)
  },
  {
    path: 'home',
    loadComponent: () => import('./home/home.page').then(m => m.HomePage),
    canActivate: [PixxleAuthGuard] // Protection par authentification
  }
];