A react frontend application needs to handle situations where a user tries to access a private server resource. To accomplish that, implementing User Authentication is the first thing that comes in mind. Among others that means implementing a Login/Logout functionality, retrieving user information and protecting our application routes.

On the other side our backend application needs to ensure that private resources are served to authenticated users as well. By implementing a spring-boot app and adding spring-security which provides multiple features such as Authorization, Single sign-on, LDAP etc, is one way to start with.

Okta is an identity management service with Single Sign-On (SSO), Active Directory (AD) and LDAP integration, multifactor authentication (MFA), mobile identity management, configurable rules for corporate security being just a few of its capabilities. For more information regarding Okta’s features visit: https://developer.okta.com/docs/concepts/how-okta-works/

Combining these three together can help you create a secure application with Single Sign-On access, which greatly improves usability for employees. In this article we will leverage Okta’s packages to secure our application with OpenID Connect on top of OAuth 2.0 protocol.

1. Setup Okta App Integration

To start with, you’ll need an Okta developer account to setup your authorization server. Create an account at https://developer.okta.com/signup/

Login and setup the Okta integration app as follows:

From the menu select Applications → Create App Integration

For Sign-in method select OIDC — OpenID Connect, for Application type select Single-Page Application and click Next.

In the General Settings tab enter the App integration name and select Grant type → Authorization Code , required to enable OAuth2 authentication.

Set the Sign-in redirect URIs to: http://localhost:3000/login/callback

Set the Sign-out redirect URIs to: http://localhost:3000

When using the OpenID Connect sign-in method, we’ll be redirected to an Okta hosted sign-in widget. That’s why we’ll need a callback URL where Okta will be able to return the user’s details back to our application.

http://localhost:3000 is where our react app will be served. You can also add multiple URIs if you need access from different environments, for example dev or prod by clicking the Add URI button.

In the Assignments tab select: Allow everyone in your organization to access

By clicking save, a Client ID will be generated. This is a Public identifier for the client that is required for all OAuth flows and we’ll need that in the next steps when configuring our spring boot app along with our client react app.

2. Setup Spring Boot App

Create a new spring boot application. For this example, we’ll use Java 17 and spring-boot 3.0. By adding the following directories we will create a simple REST endpoint to fetch some data.

src/
┣ main/
┃ ┣ java/
┃ ┃ ┗ com/
┃ ┃   ┗ example/
┃ ┃ ┃   ┗ server/
┃ ┃ ┃ ┃   ┣ config/
┃ ┃ ┃ ┃ ┃ ┃ ┗ WebSecurityConfig.java
┃ ┃ ┃ ┃   ┣ controller/
┃ ┃ ┃ ┃ ┃ ┃ ┣ StatusController.java
┃ ┃ ┃ ┃ ┃ ┃ ┗ TaskController.java
┃ ┃ ┃ ┃   ┣ dto/
┃ ┃ ┃ ┃ ┃ ┃ ┗ Task.java
┃ ┃ ┃ ┃   ┣ service/
┃ ┃ ┃ ┃ ┃ ┃ ┗ TaskService.java
┃ ┃ ┃ ┃   ┗ ServerApplication.java
┃ ┗ resources/
┃   ┗ application.properties

Task.java

In the dto package create the Task.java to represent our dummy data and add the lombok dependency to your classpath.

@Data
@Builder
public class Task {
    private String id;
    private String title;
    private String description;
}

TaskService.java

In the service directory add the TaskService.java and create a method to return the dummy data list.

@Service
public class TaskService {

    public List<Task> getTasks() {
        List<Task> tasks = new ArrayList<>();
        tasks.add(Task.builder().id("1").title("Title 1").description("Description for item 1").build());
        tasks.add(Task.builder().id("2").title("Title 2").description("Description for item 2").build());
        tasks.add(Task.builder().id("3").title("Title 3").description("Description for item 3").build());
        return tasks;
    }
}

StatusController.java

In the controller package add a REST controller to simply return a status string. We will later keep this path unprotected to test our security configuration.

@RestController
public class StatusController {

    @CrossOrigin
    @GetMapping(path = {"/api/status"}, produces = MediaType.APPLICATION_JSON_VALUE)
    public ResponseEntity<?> status() {
        return ResponseEntity.status(HttpStatus.OK)
                .body("status: UP");
    }
}

TaskController.java

Within the controller directory create the TaskController.java which will return the list of Tasks. We will secure this path in a next step.

@RestController
@RequestMapping(value = "api/")
@AllArgsConstructor
public class TaskController {
    TaskService taskService;

    @GetMapping(value = "tasks", produces = MediaType.APPLICATION_JSON_VALUE)
    public ResponseEntity<?> getTasks() {
        return ResponseEntity.ok().body(
               taskService.getTasks());
    }
}
}

At this point if you try to call your api endpoint http://localhost:8080/api/tasks, you should achieve a successful response including your dummy data.

Securing your app

Add the okta-spring-boot-starter dependency in your pom. The Okta Spring Boot Starter configures Spring Security to validate an access token attached to incoming requests from the HTTP request’s Authorization: Bearer header value.

<dependency>
    <groupId>com.okta.spring</groupId>
    <artifactId>okta-spring-boot-starter</artifactId>
    <version>2.1.6</version>
</dependency>

If you try to run your app you’ll get a warning indicating that you have to setup your security configuration: Your security configuration must be updated before running your application in production.

Updating your application properties with your issuer and client_id as configured in step 1 is all you need.

okta.oauth2.issuer= https://{yourOktaDomain}/oauth2/default
okta.oauth2.client-id= {yourClientId}

Finally, we must create a web security configuration to secure all of our paths except from the “/api/status” and enable jwt token validation. Resource Server will automatically configure itself to validate JWT-encoded Bearer Tokens from your Okta issuer.

In order to be able to access our api from different origins, we’ll add some cors mapping to allow all origins and GET methods.

@Configuration
@EnableWebSecurity
public class WebSecurityConfig {

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.cors().and()
                .authorizeHttpRequests((requests) -> requests
                        .requestMatchers(
                          new AntPathRequestMatcher("/api/status")).permitAll()
                        .anyRequest().authenticated())
                .oauth2ResourceServer(OAuth2ResourceServerConfigurer::jwt);
        return http.build();
    }

    @Bean
    public WebMvcConfigurer corsMappingConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("*")
                        .allowedMethods("GET")
                        .allowedHeaders("*");
            }
        };
    }
}

When running the app and performing a GET /api/tasks request, you should now get an unauthorised 401 response.

Performing a GET request for /api/status should respond with a success “status: Up” string as we’ve allowed this path in our previous step. In the next part we’ll be setting up a react application to interact with our api using Okta authentication.

3. Setup React App

Create the react app and add required Okta dependencies. We’ll be using ant design for some basic layout styles. In this example we’ve used react 18. We’ll name our app: “client”.

npx create-react-app client
cd client
npm start

Install dependencies

npm install @okta/okta-auth-js@latest
npm install @okta/okta-react@latest
npm install react-router-dom
npm install antd

Create directories and files

These are all the components we’ll need to create the demo client application. Notice that we won’t be creating any Login page. Instead we’ll be using Okta’s hosted sign in page.

src/
┣ components/
┃ ┣ RequiredAuth.js
┃ ┣ Routes.js
┃ ┗ SideMenu.js
┣ okta/
┃ ┗ config.js
┣ pages/
┃ ┣ Dashboard.js
┃ ┗ Home.js
┣ App.css
┣ App.js
┣ index.css
┣ index.js
┗ logo.svg
.env.local

.env.local

Start with you env.local file. Create it under your root client project directory if not present and add your variables. Variable names must have the “REACT_APP_” prefix in order for react to fetch them. Set the values for Okta ISSUER and CLIENT_ID to reflect your Okta settings as configured in step 1 along with your spring-boot server API_URL.

REACT_APP_API_URL=http://localhost:8080/api
REACT_APP_ISSUER=https://{yourOktaDomain}/oauth2/default
REACT_APP_CLIENT_ID={yourClientId}

okta/config.js

Create the config.js file under okta directory and define the oidc object which will be later used to configure okta security.

const CLIENT_ID = process.env.REACT_APP_CLIENT_ID || '{clientId}';
const ISSUER = process.env.REACT_APP_ISSUER || 'https://{yourOktaDomain}/oauth2/default';
const REDIRECT_URI = `${window.location.origin}/login/callback`;

export default {
  oidc: {
    clientId: CLIENT_ID,
    issuer: ISSUER,
    redirectUri: REDIRECT_URI,
    scopes: ['openid', 'profile', 'email'],
    pkce: true,
    responseType: ['id_token', 'token']
  }
};

Dashboard.js

Create the file Dashboard.js under pages. This component will be responsible for displaying the data fetched from our api. We’ll be using an antd table with two columns to display our data list. On useEffect() hook we’ll check whether the user is authenticated and if so, we’ll fetch our data from our api by passing the access token to the Authorization header.

import React, { useState, useEffect } from 'react';
import { Table } from "antd";
import { useOktaAuth } from '@okta/okta-react';

const baseURL = process.env.REACT_APP_API_URL + '/tasks';

const columns = [
    {
        title: "Title",
        dataIndex: "title",
    },
    {
        title: "Description",
        dataIndex: "description",
    }
]

function Dashboard() {

    const [tasks, setTasks] = useState(null);
    const { authState, oktaAuth } = useOktaAuth();

    useEffect(() => {
        if (authState && authState.isAuthenticated) {
            const accessToken = oktaAuth.getAccessToken();
            fetch(`${baseURL}`, {
                headers: {
                    Authorization: `Bearer ${accessToken}`,
                },
            })
                .then((response) => {
                    return response.json();
                })
                .then((data) => {
                    setTasks(data);
                })
                .catch((err) => {
                    console.error(err);
                });
        }
    }, [authState, oktaAuth]);

    if (!tasks) return null;

    return (
        <Table dataSource={tasks} columns={columns} pagination={false} rowKey='id' />
    );
}

export default Dashboard;

Home.js

Create the file Home.js under pages. This page will display a welcome message as long as the user is authenticated.

import { useOktaAuth } from '@okta/okta-react';
import React, { useState, useEffect } from 'react';
import { Spin } from 'antd';

function Home() {
  const { authState, oktaAuth } = useOktaAuth();
  const [userInfo, setUserInfo] = useState(null);

  useEffect(() => {
    if (!authState || !authState.isAuthenticated) {
      setUserInfo(null);
    } else {
      oktaAuth.getUser().then((info) => {
        setUserInfo(info);
      });
    }
  }, [authState, oktaAuth]);


  if (!authState || !userInfo) {
    return (
      <Spin />
    );
  }

  return (
    <h1>
       Welcome {userInfo.given_name} !  &#128075;
    </h1>
  );
}

export default Home;

SideMenu.js

This is an antd Menu including the required items for navigation throughout our components. For the logout process the oktaAuth.signOut() method will be called, which will redirect to Okta to end the session and then redirect back to okta hosted sign in page.

import { Menu } from "antd";
import { HomeOutlined, DashboardOutlined, LogoutOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom';
import { useOktaAuth } from '@okta/okta-react';

function SideMenu() {
    const navigate = useNavigate();
    const { oktaAuth } = useOktaAuth();
    const logout = async () => oktaAuth.signOut();

    return (
        <div>
            <Menu theme="dark"
                onClick={
                    ({ key }) => {
                        if (key != "/logout") {
                            navigate(key);
                        }
                    }
                }
                items={[
                    { label: "Home", key: "/", icon: <HomeOutlined /> },
                    { label: "Dashboard", key: "/dashboard", icon: <DashboardOutlined /> },
                    { label: "Logout", key: "/logout", onClick: logout, icon: <LogoutOutlined /> }
                ]}>
            </Menu>
        </div>
    );
}

export default SideMenu;

RequiredAuth.js

Create the RequiredAuth.js under components. This is where our main security logic will be held. It will be used along with the Routes to display the content of each component. If the user is not authenticated, it will redirect to the okta hosted sign in page. We’ll be using the <Outlet/> component within the antd <Content/> component which will expect the content to be populated from the nested routes we’ll define in the next step.

import React, { useEffect } from 'react';
import { useOktaAuth } from '@okta/okta-react';
import { toRelativeUrl } from '@okta/okta-auth-js';
import { Outlet } from 'react-router-dom';
import { Spin } from 'antd';
import { Layout } from 'antd';
import SideMenu from './SideMenu';

const { Header, Footer, Sider, Content } = Layout;

function RequiredAuth() {
  const { oktaAuth, authState } = useOktaAuth();

  useEffect(() => {
    if (!authState) {
      return;
    }

    if (!authState?.isAuthenticated) {
      const originalUri = toRelativeUrl(window.location.href, window.location.origin);
      oktaAuth.setOriginalUri(originalUri);
      oktaAuth.signInWithRedirect();
    }
  }, [oktaAuth, !!authState, authState?.isAuthenticated]);

  if (!authState || !authState?.isAuthenticated) {
    return (
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
      }} >
        <Spin size="large" />
      </div>
    );
  }

  return (
    <Layout style={{ height: "100vh" }} >
      <Header style={{ color: "white" }}>Header</Header>
      <Layout>
        <Sider><SideMenu /></Sider>
        <Content style={{ margin: '24px' }}>
          <Outlet />
        </Content>
      </Layout>
      <Footer>Footer</Footer>
    </Layout>
  );

}

export default RequiredAuth;

Routes.js

Create your routes file under components and set element={<RequiredAuth />} on the root path. Everything under this route will require the user to be authenticated.

Notice here that we added a route for path=”login/callback” and passed the LoginCallback element for okta react sdk to handle the token exchange. This specific path should not be requiring authentication.

import React from 'react';
import { Routes, Route, Outlet } from 'react-router-dom';
import { LoginCallback, } from '@okta/okta-react';
import Home from '../pages/Home';
import Dashboard from '../pages/Dashboard';
import RequiredAuth from './RequiredAuth';

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<RequiredAuth />}>
        <Route path='' element={<Home/>} />
        <Route path='/dashboard' element={<Dashboard />} />
        <Route path="/logout" />
      </Route>
      <Route path="login/callback" element={<LoginCallback />} />
    </Routes>
  );
};

export default AppRoutes;

App.js

In order for okta to secure our routes, everything should be wrapped into the Security component provided by okta-react. You need to provide the oktaAuth configuration and the restoreOriginalUri property in the <Security> component.

import './App.css';
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
import { Security } from '@okta/okta-react';
import config from './okta/config';
import AppRoutes from './components/Routes';

const oktaAuth = new OktaAuth(config.oidc);

function App() {
  const navigate = useNavigate();
  const restoreOriginalUri = (_oktaAuth, originalUri) => {
    navigate(toRelativeUrl(originalUri || '/', window.location.origin));
  };

  return (
    <Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri}>
      <AppRoutes />
    </Security>
  );
};

export default App;

index.js

Finally, ensure your <App/> is surrounded with the <BrowserRouter> to enable navigation between views from different components in your React application.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

4. Running your Apps

Run your spring server app and your client with npm start. You should be able to view your client application under localhost:3000

5. Summary

The full source code can be found in GitHub here spring-boot-app and react-app .

Default access token lifetime is 1 hour. You can review this under your Okta account. From the menu select Security → API . Click on the default Authorization Server and go to the tab Access Policies, here you will find a Default Policy Rule and by clicking the edit icon, you can change the access token lifetime.

While running your app you’ll be able to retrieve your Bearer token from your application local storage and use Okta’s introspect api to check the status of your token among other information.

curl --location --request POST 'https://<your_okta_domain>/oauth2/default/v1/introspect' \
-H "Accept: application/json" \
-H "Content-Type: application/x-www-form-urlencoded" \
-d "client_id=<your_client_id>" \
-d "token_type_hint=access_token" \
-d "token= <your_access_token_value>"

If you sign out and run the above curl again, you’ll be able to see that your token is inactive.

{
    "active": false
}

While the access token is inactive, by calling the GET /api/tasks with your Authorization Bearer header, you’ll notice that the request returns a success response. That’s because JWTs are locally validated. If you need to validate each token remotely you can use opaque tokens. There’s a great explanatory article here: https://developer.okta.com/blog/2020/08/07/spring-boot-remote-vs-local-tokens. It fully depends on your business’ approach and your security expectations.

Thank you for reading so far! Hopefully this has helped some of you. Implementing projects using the stack described above is just a small part of our daily work for the company I work for. If the terms Java, Spring Boot, Kubernetes, Gitlab, React mean something to you, you may use this link to read about our open positions, apply and join us! Alternatively, browse through our new website 💻 to see how our technology makes a difference! 🚀