Angular package

The Angular package is a library that provides a set of components, services, and directives to help you build a user interface for your application.

It is built on top of Angular and provides a set of components that are designed to work together to create a seamless user experience.

Installation

To install the Angular package, run the following command:

npm install @arcane-auth/ngx-client

Usage

To use the Angular package in your application, import the ArcaneAuthModule in your AppModule:

import { ArcUserModule } from '@arcane-auth/ngx-client';

const arcaneAuthConfig = {
  api: environment.api, // The base URL of the API server (required) default: 'https://localhost:2000'
  login: '/auth/login', // The redirect URL for login (required) default: '/auth/login'
  register: '/auth/register', // The redirect URL for registration (required) default: '/auth/register'
  recover: '/auth/recover', // The redirect URL for password recovery (required) default: '/auth/recover'
  authRedirect: '/l/users', // The redirect URL for authenticated users (required) default: '/l/users'
};

@NgModule({
  declarations: [],
  imports: [...ArcUserModule.forRoot(arcaneAuthConfig)],
  bootstrap: [],
})
export class AppModule {}

Components

The Angular package provides a set of components that you can use to build your user interface. Here are some of the components that are available:

Login screen

<!--import { UMLoginComponent } from '@arcane-auth/lib';-->
<arcane-auth-login></arcane-auth-login>

Registration screen

<!--import { ArcRegisterComponent } from '@arcane-auth/lib';-->
<arcane-auth-register></arcane-auth-register>

Password recovery screen

<!--import { ArcRecoverComponent } from '@arcane-auth/lib';-->
<arcane-auth-recover></arcane-auth-recover>

User profile screen

<!--import { ArcProfileComponent } from '@arcane-auth/lib';-->
<arcane-auth-profile></arcane-auth-profile>

Services

The Angular package provides a set of services that you can use to manage your application's user data, login and interact with the API

here are a few examples of how you can use the services in your application:

import { ArcAuthService } from '@arcane-auth/ngx-client';

@Injectable()
export class UserService {
  constructor(private arcAuthService: ArcAuthService) {

    this.arcAuthService.id$.subscribe((id) => {console.log(id);}); // Get the current userid
    this.arcAuthService.user$.subscribe((user) => {console.log(user);}); // Get the current user
    this.arcAuthService.token$.subscribe((user) => {console.log(token);}); // Get the current token

    this.arcAuthService.loginWith...(); // Login with a specific provider
    this.arcAuthService.logout(); // Logout the current user

    this.arcAuthService.updateUser(); // Update the current user
  }

}

Guards

The Angular package provides a set of guards that you can use to protect your routes from unauthorized access

here are a few examples of how you can use the guards in your application:

import { AuthGuard } from '@arcane-auth/ngx-client'; // Auth guard for routes that require authentication
import { UnAuthUserGuard } from '@arcane-auth/ngx-client'; // Auth guard for routes that require user access
import { AdminGuard } from '@arcane-auth/ngx-client'; // Auth guard for routes that require admin access

🧑‍💻 Contributing

We have a contributing guideline available. Feel free to contact us before coding.