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