React

This tutorial demonstrates how to add user login to an React application using BlitzWare.

This tutorial is based on the example app.

1. Configure BlitzWare

2. Install the BlitzWare React SDK

3. Add Login to your application

4. Show User profile info and add Logout to your application

5. Add Protection to your routes

1) Configure BlitzWare

Get Your Application Keys

You will need some details about your application to communicate with BlitzWare. You can get these details from the Application Settings section in the BlitzWare dashboard.

You need the Client ID.

Configure Redirect URIs

A redirect URI is a URL in your application where BlitzWare redirects the user after they have authenticated. The redirect URI for your app must be added to the Redirect URIs list in your Application Settings under the Security tab. If this is not set, users will be unable to log in to the application and will get an error.

2) Install the BlitzWare React SDK

Run the following command within your project directory to install the BlitzWare React SDK:

npm

npm install blitzware-react-sdk

yarn

yarn add blitzware-react-sdk

The SDK exposes methods and variables that help you integrate BlitzWare with your React application idiomatically using React Hooks or Higher-Order Components.

Configure the BlitzWareAuthProvider component

Under the hood, the BlitzWare React SDK uses React Context to manage the authentication state of your users. One way to integrate BlitzWare with your React app is to wrap your root component with an BlitzWareAuthProvider that you can import from the SDK.

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import { BlitzWareAuthProvider } from "blitzware-react-sdk";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <BlitzWareAuthProvider
        authParams={{
          clientId: "your-client-id",
          redirectUri: "your-redirect-uri",
          responseType: "code", // or "token" for implicit flow
        }}
      >
        <App />
      </BlitzWareAuthProvider>
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

The BlitzWareAuthProvider component takes the properties clientId and redirectUri ; the values of these properties correspond to the Client ID and Redirect URI values that you can find under Settings in the Single Page Web Application (SPA) that you registered with BlitzWare.

3) Add Login to your application

The BlitzWare React SDK gives you tools to quickly implement user authentication in your React application, such as creating a login button using the login() method from the useLogin() hook. Executing login() redirects your users to the BlitzWare Universal Login Page, where BlitzWare can authenticate them. Upon successful authentication, BlitzWare will redirect your users back to your application.

Login.jsx

import React from "react";
import { useIsAuthenticated, useLogin } from "blitzware-react-sdk";

const Login = () => {
  const isAuthenticated = useIsAuthenticated();
  const login = useLogin();

  if (isAuthenticated) {
    window.location.href = "/dashboard";
    return;
  }

  return (
    <div>
      <h1>Login Page</h1>
      <button onClick={login}>Login</button>
    </div>
  );
};

export default Login;

4) Show User profile info and add Logout to your application

The BlitzWare React SDK helps you retrieve the profile information associated with logged-in users quickly in whatever component you need, such as their name or profile picture, to personalize the user interface. The profile information is available through the user property exposed by the useAuthUser() hook.

You also need a way to log out. You can create a logout button using the logout() method from the useLogout() hook. Executing logout() clears the session and makes sure that the user can not access protected resources.

Take this Dashboard component as an example of how to use it:

Dashboard.jsx

import React from "react";
import {
  useAuthUser,
  useIsAuthenticated,
  useAuthLoading,
  useLogout,
} from "blitzware-react-sdk";

const Dashboard = () => {
  const logout = useLogout();
  const user = useAuthUser();
  const isAuthenticated = useIsAuthenticated();
  const isLoading = useAuthLoading();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    isAuthenticated && (
      <div>
        <h1>Dashboard</h1>
        <p>Welcome to the protected dashboard, {user.username}!</p>
        <button onClick={logout}>Logout</button>
      </div>
    )
  );
};

export default Dashboard;

The user property contains sensitive information and artifacts related to the user's identity. As such, its availability depends on the user's authentication status. To prevent any render errors, use the isAuthenticated property from useIsAuthenticated() to check if BlitzWare has authenticated the user before React renders any component that consumes the user property. Ensure that the SDK has completed loading before accessing the isAuthenticated property, by checking that isLoading is false.

5) Add Protection to your routes

The BlitzWare React SDK exports the ProtectedRoute component used to protect routes by preventing unauthorized users from accessing certain pages or components within your application. Here is how you can do it:

App.js

import "./App.css";
import { Routes, Route } from "react-router-dom";
import { ProtectedRoute } from "blitzware-react-sdk";
import Login from "./components/Login";
import Dashboard from "./components/Dashboard";

function App() {
  return (
    <>
      <Routes>
        <Route path="*" element={<Login />} />
        <Route path="/login" element={<Login />} />
        <Route
          path="/dashboard"
          element={<ProtectedRoute component={Dashboard} />}
        />
      </Routes>
    </>
  );
}

export default App;

That's it!