---
title: "Create a React PWA with Social Login Authentication"
description: "The tutorial builds a React Progressive Web App (PWA) called Lister, combining offline support with authentication through Okta and Google Social Login. It creates an Okta OIDC single-page application, configures Authorization Code and Refresh Token grants, sets localhost redirect URIs, and wires Okta React and AuthJS into React Router routes. The implementation uses environment variables for the Okta domain and client ID, OAuth 2.0 and OpenID Connect scopes including openid, profile, email, and offline_access, and a Vite PWA plugin to provide a manifest, service worker, and installable behavior. Authenticated users receive a todo-list interface with CRUD operations, while the article notes that production deployments would need more advanced service-worker configuration and a proper database."
---

# Create a React PWA with Social Login Authentication

[Okta](https://yomu.fyi/company/okta) · Emmanuel Jesulayomi Folaranmi · Jul 22, 2025

**Type:** Tutorial

## Summary

The tutorial builds a React Progressive Web App (PWA) called Lister, combining offline support with authentication through Okta and Google Social Login. It creates an Okta OIDC single-page application, configures Authorization Code and Refresh Token grants, sets localhost redirect URIs, and wires Okta React and AuthJS into React Router routes. The implementation uses environment variables for the Okta domain and client ID, OAuth 2.0 and OpenID Connect scopes including openid, profile, email, and offline\_access, and a Vite PWA plugin to provide a manifest, service worker, and installable behavior. Authenticated users receive a todo-list interface with CRUD operations, while the article notes that production deployments would need more advanced service-worker configuration and a proper database.

## Context

The setup uses Node.js and NPM, a command terminal, basic JavaScript and TypeScript knowledge, an IDE, a Google Cloud Console account, and an Okta Integrator Free Plan account. The example uses Vite 5.4, React 18.3, Okta React 6.9, and Okta AuthJS SDK 7.8.

## Approach / What changed

The implementation scaffolds a React and TypeScript app with Vite, adds React Router and Okta SDK packages, configures an OIDC single-page application in Okta, and protects routes through the Okta React Security component. It then configures Google as an identity provider, adds social-login handling, turns the app into a PWA with the Vite PWA plugin, and builds an authenticated todo list.

## Takeaways

- Okta is configured as an OIDC single-page application with Authorization Code and Refresh Token grants, localhost sign-in and sign-out redirect URIs, and scopes for openid, profile, email, and offline\_access.
- The React app keeps its Okta domain and client ID in Vite environment variables, while React Router and Okta React handle route rendering, authentication state, login callbacks, and sign-out.
- The Vite PWA setup supplies a manifest, service worker, required icons, and an install prompt; the article says a production app would need more advanced service-worker configuration and a proper database.

## FAQ

### Which OAuth grants and scopes does the Okta application use?

The Okta integration enables the Authorization Code and Refresh Token grants. The React configuration requests openid, profile, email, and offline\_access scopes.

### How does Google Social Login fit into the Okta setup?

Google is configured as an identity provider in Okta, allowing users to authenticate with their existing Google accounts. The app uses Okta’s authentication flow and callback route rather than implementing a separate Google login flow in React.

### What is still missing for a production-ready PWA?

The tutorial says the example is adequate as an introduction but that production deployments would require more advanced service-worker configurations and a proper database setup. The todo list shown is therefore a basic example rather than a complete production architecture.

**Tags:** [Authentication](https://yomu.fyi/topic/authentication), [OAuth2](https://yomu.fyi/topic/oauth2), [Progressive Web Apps](https://yomu.fyi/topic/pwa), [React](https://yomu.fyi/topic/react)

- Source: [Okta](https://developer.okta.com/blog/2025/07/22/react-pwa)
- Source URL: https://developer.okta.com/blog/2025/07/22/react-pwa
- Ingested by Yomu: 2026-09-17T14:06:13.167Z

[Read original post](https://developer.okta.com/blog/2025/07/22/react-pwa)