Angular + TailWindCSS = ❤️

Hello, Am Udhay (OO-dhy)

Hello TailWindCSS! 👋

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Config TailWindCSS in Angular App🔧

Update environment.ts🔧

  • Open environment.ts in Angular app and update with below code.
  • This is just for Non prod environment. Update similarly in enviornment.prod.ts if you want to deploy Prod grade app
import { domain, clientId } from '../../auth_config.json';

export const environment = {
  production: false,
  auth: {
    domain,
    clientId,
    redirectUri: window.location.origin,
  },
};

Register & Configure Auth0 Module🔧

Register Auth0 Module in app,module.ts as shown below:

import { AuthModule } from '@auth0/auth0-angular';
import { environment as env } from '../environments/environment';
.
@NgModule({
  declarations: [...],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    .
    .
    // add and initialize AuthModule
    AuthModule.forRoot({
      ...env.auth,
    }),
  ],
.

Secure Routes in Angular🔧

Add Auth0 "AuthGuard" to canActivate Routes property. It handles Login and redirect back User to requested path.

.
.
import { AuthGuard } from '@auth0/auth0-angular';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  .
  .
  .
  {
    path: 'pokemon/:id',
    loadChildren: () =>
      import('./pokemon-stats/pokemon-stats.module').then(
        (m) => m.PokemonStatsModule
      ),
    canActivate: [AuthGuard],
  },
];
.
.

Secure Routes in Angular🔧

Let's explore Auth0 - Identity providers and Multi Factor Authentication

Demo

Code - 

Demo - 

Checkout my previous

Useful links

ngThanks!

Angular + TailWindCSS = ❤️

By Udhayakumar G

Angular + TailWindCSS = ❤️

This is my recent talk for Angular Online Meetup on "Let's create an Angular Storybook! 🎨". Reach me @askudhay on Twitter. Happy learning! Thanks.

  • 1,281