Require authentication

In many applications, you want to prevent the user from accessing certain routes or sections unless they are signed in. You can require authentication across the entire app or just require it for particular routes or controllers. Any route that doesn't specifically require authentication is accessible without signing in (also called anonymous access).

It's important to note that protecting routes in your single-page app does not truly prevent the user from accessing those parts of your application. After all, it's JavaScript running in the browser and anyone could open the browser's developer tools and change things! Protecting routes provides a consistent and good experience for your users. The real security enforcement must be done in the API that your single-page app calls (see Use the access token). See also the Protect your API endpoints guide.

Require authentication for a specific route

If you want the user to only have access to a route if they are signed in, require authentication for just those routes.

• Angular
• React
• Vue.js

Use OktaAuthGuard on your route definition (see canActivate in the Angular docs).

import { Routes, RouterModule } from '@angular/router';
import { OktaAuthGuard } from '@okta/okta-angular';
import { ProtectedComponent } from './protected.component';

const appRoutes: Routes = [
  {
    path: 'protected',
    component: ProtectedComponent,
    canActivate: [ OktaAuthGuard ],
  },
  // Other routes...
];

// NgModule...

Require authentication for everything

For some applications, you may want to require the user to be authenticated for all routes.

• Angular
• React
• Vue.js

To require authentication for all routes, use a loop to add OktaAuthGuard to every item in the Routes collection.

import { Routes, RouterModule } from '@angular/router';
import { OktaAuthGuard } from '@okta/okta-angular';

const appRoutes: Routes = [
  // Your routes...
];

// Require authentication on every route
appRoutes.forEach(route => {
  router.canActivate = router.canActivate || [];
  route.canActivate.push(OktaAuthGuard);
});

// NgModule...

Next: Get info about the user