How to Add Auth to Your PWA with Okta and Stencil

Progressive Web Apps (PWAs) are revolutionizing web development, offering a solution to the challenges of maintaining consistent updates across diverse development teams and the dilemma of choosing between web and mobile app development. PWAs provide many mobile app features without the overhead of managing multiple teams and codebases.

Their performance is exceptional even on slow or offline connections, thanks to caching and service workers. Service workers intercept server requests, prioritizing cached data and updating it with fresh server data when available.

The Ionic team's Stencil project is a game-changer. Stencil is a compiler generating standards-compliant web components, avoiding the bloat of traditional JavaScript frameworks. It compiles your code into vanilla components, and integrates seamlessly with your preferred framework. The Stencil starter project is a great starting point, achieving near-perfect Lighthouse PWA scores.

Building a PWA with Stencil: A Step-by-Step Guide

1. Set up the Starter Application:

   Clone the starter application and remove the GitHub remote:

   git clone https://github.com/ionic-team/stencil-starter.git my-stencil-app
   cd my-stencil-app
   git remote rm origin

   Install dependencies:

   npm install

   (Ignore node-pre-gyp warnings about fsevents—this is a known npm issue.)

2. Integrate Okta Auth SDK (via CDN):

   Add the Okta Auth SDK to index.html before the closing </body> tag:

   <🎜>

   (Using the CDN is currently more reliable with Stencil than the npm package.)

3. Production Build for Accurate PWA Assessment:

   Run npm run build to generate a production build. This creates the www folder containing sw.js, your service worker. Note that the development build (npm start) will not accurately reflect PWA capabilities.

4. Configure Your Okta Application:

   Create a free Okta developer account (if you don't have one). Add a new Single-Page App application, naming it something descriptive like "Stencil SPA". Set the base URIs and login redirect URIs to http://localhost:3333. Note your Client ID and Okta organization URL (e.g., https://dev-XXXXXX.oktapreview.com).

   

5. Create the Authentication Component (app-auth):

   Create app-auth.css and app-auth.tsx in the components/app-auth folder. The app-auth.tsx file will contain the login form and authentication logic using the OktaAuth SDK. (See complete code example in original article.)

6. Add the Login Method:

   The login() method handles user authentication with Okta, stores the ID token in localStorage, and redirects to the profile page upon successful login. Error handling is included. (See complete code example in original article.)

7. Enhance Login Functionality:

   Implement componentWillLoad() to redirect users directly to the profile page if an ID token is already present in localStorage. Add a keydown.enter listener to allow login via the Enter key.

8. Develop the Profile Page (app-profile):

   Create an interface (AppUser.tsx) to define the structure of user claims. Update app-profile.tsx to display user claims from the stored ID token and include a logout button. Handle potential isServer scenarios for prerendering. (See complete code example in original article.)

9. Configure Routing:

   Add routes for the login and profile pages in components/my-app/my-app.tsx using <stencil-route></stencil-route>. Update the home page link to /profile.

10. Add Styles (Optional):

    Enhance the visual appeal of the login form and profile page with CSS. (See complete code example in original article.)

This enhanced guide provides a clearer, more concise walkthrough of building a PWA with authentication using Stencil and Okta. Remember to refer to the original article for the complete code snippets. The images from the original article are included to maintain context.

The above is the detailed content of How to Add Auth to Your PWA with Okta and Stencil. For more information, please follow other related articles on the PHP Chinese website!