Angular

Installation

Run npm install @rownd/angular or yarn add @rownd/angular

Usage

The library provides an Angular Module and Service for dependency injection.

In the main app.module.ts file, add the Rownd module. You'll also need to include include the @ngrx/store module as well, as Rownd will drive state updates through it.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';

import { StoreModule } from '@ngrx/store';
import { RowndModule } from '@rownd/angular';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot({}),
    RowndModule.forRoot({ appKey: '<your_app_key>' }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Module params

• appKey (required): This is the key generated by the Rownd dashboard.

Usage within a component

import { Component } from '@angular/core';
import { RowndService } from '@rownd/angular';

@Component({
  selector: 'protected-component',
  templateUrl: 'protected.component.html',
  styleUrls: ['protected.component.scss'],
})
export class ProtectedComponent {

  constructor(private rownd: RowndService) {
    // Subscribe to Rownd isAuthenticated observable
    this.rownd.isAuthenticated$.subscribe({
      next(auth) {
        console.log("is Authenticated: ", auth)
      }
    });

    // Subscribe to Rownd User Data observable
    this.rownd.user$.subscribe({
      next(user) {
        console.log("user: ", user)
      }
    });
  }

  signIn() {
    this.rownd.requestSignIn();
  }

  signOut() {
    this.rownd.signOut();
  }
} 

API Reference

requestSignIn()

Trigger the Rownd sign-in dialog

import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

this.rownd.requestSignIn()

signOut()

Signs out the current user and clears their profile, returning them to a completely unauthenticated state.

import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

this.rownd.signOut()

is_authenticated

Indicates whether the current user is signed-in or not.

import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

// user$ is an observable
this.rownd.user$

isAuthenticated

Indicates whether the current user is signed in or not.

import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

// isAuthenticated$ is an observable
this.rownd.isAuthenticated$

user

Represents information about the current user, specifically their profile information. The schema will match whatever you define in the Rownd dashboard.

import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

// user$ is an observable
this.rownd.user$

isInitializing

isInitializing will be true until Rownd has fully loaded, recalled its state, and resolved the current user's authentication status. This usually takes only a few milliseconds, but if you make decisions that depend on the isAuthenticated flag while isInitializing is still true, your code/logic may not work as you expect.

import { RowndService } from '@rownd/angular';

constructor(private rownd: RowndService) {}

// isInitializing$ is an observable
this.rownd.isInitializing$