Udhayakumar G
Am a seasoned Full stack java developer, have close to 11 years experience in developing software systems (both frontend and backend). Love to share my knowledge with community. Happy coding!
Hello, Am Udhay (OO-dhy)
Auth0 is a flexible, drop-in solution to add authentication and authorization services to your applications. Your team and organization can avoid the cost, time, and risk that comes with building your own solution to authenticate and authorize users.
# Add Auth0 support to Angular project
cd pokemon-app
ng add @auth0/auth0-angular
.
.
.
# JSON to store domain and Client ID
touch auth_config.json
{
"domain": "askudhay.us.auth0.com",
"clientId": "6rQ6l8lsxDiUh24L1ZaB0VmdEeZamhAp"
}
import { domain, clientId } from '../../auth_config.json';
export const environment = {
production: false,
auth: {
domain,
clientId,
redirectUri: window.location.origin,
},
};
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,
}),
],
.
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],
},
];
.
.
Let's explore Auth0 - Identity providers and Multi Factor Authentication
Code -
Demo -
Checkout my previous
By Udhayakumar G
This is my recent talk for Angular Online Meetup on "Let's create an Angular Storybook! 🎨". Reach me @askudhay on Twitter. Happy learning! Thanks.
Am a seasoned Full stack java developer, have close to 11 years experience in developing software systems (both frontend and backend). Love to share my knowledge with community. Happy coding!