<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Anthony Dombrowski</title>
    <description>The latest articles on DEV Community by Anthony Dombrowski (@akdombrowski).</description>
    <link>https://dev.to/akdombrowski</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F186749%2Ff0b1866e-6da0-4dd8-b01b-dcf1b72dff51.png</url>
      <title>DEV Community: Anthony Dombrowski</title>
      <link>https://dev.to/akdombrowski</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/akdombrowski"/>
    <language>en</language>
    <item>
      <title>Postman Without an Account: What Still Works in 2026</title>
      <dc:creator>Anthony Dombrowski</dc:creator>
      <pubDate>Tue, 25 Aug 2026 14:27:57 +0000</pubDate>
      <link>https://dev.to/akdombrowski/postman-without-an-account-what-still-works-in-2026-49aa</link>
      <guid>https://dev.to/akdombrowski/postman-without-an-account-what-still-works-in-2026-49aa</guid>
      <description>&lt;p&gt;You install Postman, open it, and hit a sign-in screen. Somewhere below the buttons is a smaller option: continue without an account, into what Postman calls the &lt;strong&gt;lightweight API client&lt;/strong&gt;. If you're here, you probably want to know how far that path actually goes. Maybe your company restricts cloud tools, maybe you work in an air-gapped environment, or maybe you simply don't think sending requests to &lt;code&gt;localhost&lt;/code&gt; should require an account.&lt;/p&gt;

&lt;p&gt;Here's exactly what works without signing in, what doesn't, and what happens to your data if you sign in later, all verified against Postman's own documentation. Plus what to use when "mostly local" isn't enough.&lt;/p&gt;

&lt;h2&gt;
  
  
  The short answer
&lt;/h2&gt;

&lt;p&gt;Without an account, Postman's lightweight API client is a &lt;strong&gt;request sender&lt;/strong&gt;: you can make calls, read responses, and keep a local history. What you can't do is &lt;em&gt;organize&lt;/em&gt; anything: no collections, no environments, no saved workflow. It's a scratchpad in the original sense: useful for one-offs, not a place to build.&lt;/p&gt;

&lt;p&gt;Per &lt;a href="https://learning.postman.com/docs/getting-started/basics/using-api-client" rel="noopener noreferrer"&gt;Postman's documentation&lt;/a&gt; (checked August 2026):&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Capability&lt;/th&gt;
&lt;th&gt;Without an account&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;HTTP, GraphQL, gRPC, WebSocket, Socket.IO, MQTT requests&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Send requests &amp;amp; inspect responses&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Request authentication&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Post-response scripts &amp;amp; tests&lt;/td&gt;
&lt;td&gt;✓ (pre-request scripts aren't listed in the docs)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Response visualization&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Request history&lt;/td&gt;
&lt;td&gt;✓ stored locally, shown in the sidebar&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;strong&gt;Collections&lt;/strong&gt; (saving &amp;amp; organizing requests)&lt;/td&gt;
&lt;td&gt;✗ requires sign-in&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Environments &amp;amp; variables&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;✗ requires sign-in&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;strong&gt;Workspaces, sync, collaboration&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;✗ requires sign-in&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The line Postman's docs draw is clear, and worth quoting: &lt;em&gt;"All of your work in the lightweight API Client is stored locally and isn't synced online with Postman."&lt;/em&gt; Local-only, that is, until you sign in. More on that below.&lt;/p&gt;

&lt;h2&gt;
  
  
  From Scratch Pad to the sign-in wall
&lt;/h2&gt;

&lt;p&gt;If this setup feels new, it's because Postman used to work differently. &lt;strong&gt;Scratch Pad&lt;/strong&gt; was Postman's account-free mode, and it supported collections. Then, in 2023:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;May 15, 2023:&lt;/strong&gt; Postman &lt;a href="https://blog.postman.com/announcing-new-lightweight-postman-api-client/" rel="noopener noreferrer"&gt;announced the lightweight API client&lt;/a&gt; and stopped shipping Scratch Pad with new downloads.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;September 15, 2023:&lt;/strong&gt; Scratch Pad's deprecated mode ended for existing users, with a migration tool that moved collections, environments, and history into cloud workspaces.
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F90nw1wooaq2w94rpyent.png" alt="postman-scratch-pad-timeline" width="800" height="280"&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Postman's stated reason was engineering cost: maintaining separate offline and cloud architectures consumed, in their words, "2x–4x the amount of time" as new protocols were added. That's a fair business decision to make. Postman is a collaboration platform, and cloud workspaces are the product. But it means the account-free path went from "Postman, minus sync" to "a request console, minus everything else." The community threads asking to bring offline mode back have been running ever since.&lt;/p&gt;

&lt;h2&gt;
  
  
  What the lightweight client is genuinely good for
&lt;/h2&gt;

&lt;p&gt;Used for what it is, the lightweight client is fine: poking at a local service, checking an endpoint's response shape, firing a quick gRPC or WebSocket call without leaving a GUI. Auth on a single request works. You can write post-response tests. Your recent calls sit in the history sidebar.&lt;/p&gt;

&lt;p&gt;The friction starts the moment you have &lt;em&gt;two related requests&lt;/em&gt;, because there's nowhere to put them. No collection to group them, no environment to hold the base URL you're now pasting into both, no way to hand your setup to a teammate.&lt;/p&gt;

&lt;h3&gt;
  
  
  The catch when you sign in later
&lt;/h3&gt;

&lt;p&gt;The lightweight client's local-only storage has an expiration condition: signing in. Per Postman's docs, when you sign in, &lt;em&gt;"your open requests and request history are automatically copied from the lightweight API Client to your default workspace"&lt;/em&gt; (or one you select). That's convenient if you wanted an account all along. It's also exactly what you need to know about in advance if keeping work off third-party infrastructure was the reason you avoided signing in. There's no long-term "local mode with collections"; the workflow features and the cloud arrive together.&lt;/p&gt;

&lt;p&gt;For the privacy-focused: what an API client transmits is a bigger topic than one post, so we'll publish a fuller look at API-client data flows separately. The short version for now is above, in Postman's own words: lightweight-client work stays local &lt;em&gt;until&lt;/em&gt; you sign in; signed-in Postman is built around cloud sync.&lt;/p&gt;

&lt;h2&gt;
  
  
  If you need actually-offline: the Git-native route
&lt;/h2&gt;

&lt;p&gt;Full disclosure, since you're on Bruno's blog: this is where we tell you about &lt;a href="https://www.usebruno.com" rel="noopener noreferrer"&gt;Bruno&lt;/a&gt;. We'll keep it factual.&lt;/p&gt;

&lt;p&gt;Bruno is an open-source API client built on the opposite architecture: there is no account to sign in to, and there is no sync service to send anything to. Collections, environments, and tests are plain files in a folder you choose, which means the features Postman gates behind sign-in are simply… local:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fc25si5wlhdwr4nlniqn4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fc25si5wlhdwr4nlniqn4.png" alt="cloud-first-vs-git-native" width="800" height="427"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Capability&lt;/th&gt;
&lt;th&gt;Postman (no account)&lt;/th&gt;
&lt;th&gt;Bruno&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;HTTP / GraphQL / gRPC / WebSocket requests&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Socket.IO / MQTT&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;td&gt;✗&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Collections&lt;/td&gt;
&lt;td&gt;✗&lt;/td&gt;
&lt;td&gt;✓ local files&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Environments &amp;amp; variables&lt;/td&gt;
&lt;td&gt;✗&lt;/td&gt;
&lt;td&gt;✓ local files&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Secrets&lt;/td&gt;
&lt;td&gt;n/a&lt;/td&gt;
&lt;td&gt;✓ stored encrypted, outside collection files&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Run whole collections + tests&lt;/td&gt;
&lt;td&gt;✗&lt;/td&gt;
&lt;td&gt;✓ app Runner or CLI (&lt;code&gt;bru run&lt;/code&gt;)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Team sharing&lt;/td&gt;
&lt;td&gt;✗ (cloud workspaces only)&lt;/td&gt;
&lt;td&gt;✓ Git: clone, branch, PR&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Account required&lt;/td&gt;
&lt;td&gt;for everything beyond one-off requests&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;never&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Works air-gapped&lt;/td&gt;
&lt;td&gt;partially&lt;/td&gt;
&lt;td&gt;fully&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Two honest notes. First, if your team lives in shared cloud workspaces with mocks and monitors, Postman's model is the point, not the problem. Bruno's collaboration story is Git, which suits teams that already review everything as code. Second, the Socket.IO/MQTT row above goes to Postman; Bruno doesn't support those protocols today.&lt;/p&gt;

&lt;p&gt;If the local-files model fits how you work, the on-ramp is short:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://blog.usebruno.com/bruno-tutorial" rel="noopener noreferrer"&gt;The official Bruno tutorial&lt;/a&gt;: zero to a tested, Git-versioned, CI-ready collection in about 15 minutes&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://blog.usebruno.com/postman-to-bruno-migration-guide" rel="noopener noreferrer"&gt;Postman → Bruno migration guide&lt;/a&gt;: imports collections and environments in minutes, with &lt;a href="https://blog.usebruno.com/programmatically-convert-postman-insomnia-openapi-to-bruno-format" rel="noopener noreferrer"&gt;@usebruno/converters&lt;/a&gt; for bulk moves&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://blog.usebruno.com/managing-secrets" rel="noopener noreferrer"&gt;How Bruno handles secrets&lt;/a&gt;: encrypted locally, never in your Git history&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://blog.usebruno.com/api-clients-in-git" rel="noopener noreferrer"&gt;Why API tools belong in Git&lt;/a&gt;: the workflow argument&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://www.usebruno.com/compare/bruno-vs-postman" rel="noopener noreferrer"&gt;Bruno vs Postman&lt;/a&gt;: the full comparison
## FAQ&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Can you use Postman without creating an account?
&lt;/h3&gt;

&lt;p&gt;Yes. The lightweight API client works without sign-in and supports HTTP, GraphQL, gRPC, WebSocket, Socket.IO, and MQTT requests, with local request history and post-response scripts. Collections, environments, and workspaces all require an account.&lt;/p&gt;

&lt;h3&gt;
  
  
  Does Postman work offline?
&lt;/h3&gt;

&lt;p&gt;The account-free lightweight client stores everything locally and doesn't sync with Postman's servers, per Postman's docs. The full, signed-in product is built around cloud workspaces and sync.&lt;/p&gt;

&lt;h3&gt;
  
  
  What happened to Postman Scratch Pad?
&lt;/h3&gt;

&lt;p&gt;Postman stopped shipping Scratch Pad with new downloads on May 15, 2023, when it announced the lightweight API client; the deprecated Scratch Pad mode ended for existing users on September 15, 2023, with a migration tool that moved local work into cloud workspaces.&lt;/p&gt;

&lt;h3&gt;
  
  
  Where is my data stored if I use Postman without an account?
&lt;/h3&gt;

&lt;p&gt;Locally on your machine. Postman's docs state lightweight client work "is stored locally and isn't synced online." If you later sign in, your open requests and history are automatically copied into a Postman workspace.&lt;/p&gt;

&lt;h3&gt;
  
  
  What's an API client that works fully offline, with collections?
&lt;/h3&gt;

&lt;p&gt;Bruno, an open-source, Git-friendly API client with no account at all: collections, environments, tests, and secrets all live as local files, shareable through Git and runnable in CI via its CLI.&lt;/p&gt;

&lt;h2&gt;
  
  
  The bottom line
&lt;/h2&gt;

&lt;p&gt;Postman without an account is a capable request console and nothing more. That's by design, and Postman is transparent about why. If one-off requests are all you need, it does the job. The moment you need collections, environments, and tests that live somewhere (offline, in your repo, under your control), that's not a workaround away in Postman. It's a different architecture.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://www.usebruno.com/downloads" rel="noopener noreferrer"&gt;Download Bruno&lt;/a&gt;&lt;/strong&gt;: no account, no sync, no sign-in wall between you and your own API workspace.&lt;/p&gt;

</description>
      <category>api</category>
      <category>postman</category>
      <category>webdev</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Add Authentication to your React App with Frontegg</title>
      <dc:creator>Anthony Dombrowski</dc:creator>
      <pubDate>Fri, 28 Mar 2025 21:59:47 +0000</pubDate>
      <link>https://dev.to/akdombrowski/add-authentication-to-your-react-app-with-frontegg-c6c</link>
      <guid>https://dev.to/akdombrowski/add-authentication-to-your-react-app-with-frontegg-c6c</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc4hso6slieh4fjwjvyxq.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc4hso6slieh4fjwjvyxq.gif" alt="frontegg-vite-react-ts" width="800" height="616"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This is a quick start guide with &lt;a href="https://github.com/akdombrowski/frontegg-vite-react-ts" rel="noopener noreferrer"&gt;an accompanying sample app&lt;/a&gt; on integrating authentication into a client-side React app using Frontegg's React SDK.&lt;/p&gt;

&lt;h2&gt;
  
  
  Is this for you?
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;You’re looking to for an IdP, authentication, authorization, OAuth/OIDC login and SSO, user management&lt;/li&gt;
&lt;li&gt;You’re working with a client-side React app (SPA)

&lt;ul&gt;
&lt;li&gt;The Frontegg React SDK is specifically designed for client-side React apps&lt;/li&gt;
&lt;li&gt;If that’s not you, you may want to see if any of the other SDKs offered here meet your needs:

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developers.frontegg.com/sdks/overview" rel="noopener noreferrer"&gt;https://developers.frontegg.com/sdks/overview&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Most of what will be talked about here is abstract enough to apply to the other tech stacks as well&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;The accompanying sample app uses Vite and their React (with Typescript) template as a starting point.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Prerequisites to follow along:
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Sign up for Frontegg
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://portal.frontegg.com/signup" rel="noopener noreferrer"&gt;https://portal.frontegg.com/signup&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  Download the Sample App
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/akdombrowski/frontegg-vite-react-ts" rel="noopener noreferrer"&gt;https://github.com/akdombrowski/frontegg-vite-react-ts&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  At least Node 20 (LTS)
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://nodejs.org/en/download" rel="noopener noreferrer"&gt;NodeJS Downloads&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Quickstart for Frontegg and React
&lt;/h2&gt;

&lt;p&gt;Vite React w/ Typescript and Frontegg is a minimal sample app to get started with &lt;a href="https://frontegg.com" rel="noopener noreferrer"&gt;Frontegg&lt;/a&gt; Authentication in a &lt;a href="https://react.dev/" rel="noopener noreferrer"&gt;React app&lt;/a&gt; using &lt;a href="https://github.com/frontegg/frontegg-react" rel="noopener noreferrer"&gt;Frontegg's client-side React SDK&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;The app is bootstrapped with &lt;a href="https://vite.dev/" rel="noopener noreferrer"&gt;Vite&lt;/a&gt; and their &lt;a href="https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts" rel="noopener noreferrer"&gt;React template (with Typescript)&lt;/a&gt;, but &lt;a href="https://github.com/frontegg/frontegg-react" rel="noopener noreferrer"&gt;Frontegg's React SDK&lt;/a&gt; can be used in any client-side React app.&lt;/p&gt;

&lt;h2&gt;
  
  
  Setup
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Frontegg Application Configuration
&lt;/h3&gt;

&lt;p&gt;From within the &lt;a href="https://portal.frontegg.com/login" rel="noopener noreferrer"&gt;Frontegg admin dashboard&lt;/a&gt;, &lt;a href="https://developers.frontegg.com/guides/management/multi-apps/overview#create-and-configure" rel="noopener noreferrer"&gt;create an Application&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;And, make sure you configure at least these:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;Enter a name.&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Tip.

&lt;ul&gt;
&lt;li&gt;Ideally, aim for a descriptive name that’s easily understandable for anyone that may end up becoming a Frontegg admin. And, if you intend to allow self-service configuration, this name will be visible to customers/users.&lt;/li&gt;
&lt;li&gt;If you only intend to use this app for testing, go ahead and get creative with it (or not).&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Type&lt;/strong&gt; = &lt;code&gt;Web&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Frontend stack&lt;/strong&gt; = &lt;code&gt;React&lt;/code&gt;&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;&lt;strong&gt;App URL&lt;/strong&gt; = &lt;code&gt;http://localhost:5173&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;the url where you're app is running&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;http://localhost:5173&lt;/code&gt; is the default url in Vite development mode (a.k.a. when running &lt;code&gt;npm run dev&lt;/code&gt;)&lt;/li&gt;
&lt;li&gt;ℹ️ Your app config in the &lt;a href="https://portal.frontegg.com/login" rel="noopener noreferrer"&gt;Frontegg admin dashboard&lt;/a&gt; should look something like this:&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv7smkvozq6ss16h8etl3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv7smkvozq6ss16h8etl3.png" alt="App Config Example" width="284" height="600"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Optional
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Description&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Auto-assigned app&lt;/strong&gt;

&lt;ul&gt;
&lt;li&gt;Following the best practice of least privilege, the default setting is that apps need to be assigned to Users in order to login.&lt;/li&gt;
&lt;li&gt;In other words, Users are restricted from authenticating and, therefore, potentially accessing apps they aren’t “assigned”.&lt;/li&gt;
&lt;li&gt;However, to make it easier to manage, apps can be assigned to Users in different ways:&lt;/li&gt;
&lt;li&gt;Assignment Scopes

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;User&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;assigning apps A and B to User 1 but only app A to User 2, then User 2 will be restricted from app B&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Account&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;assigning apps A and B to Account X but only app A to Account Y, then all users in Account 2 will be restricted from app B.&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Auto-assigned&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Configuring this assigns this to Accounts and Users, i.e., no one is restricted from it&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;You can also mix and match as you see fit!&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Forgot to add the redirect uri
&lt;/h3&gt;

&lt;p&gt;Under &lt;code&gt;Configurations&lt;/code&gt; &amp;gt; &lt;code&gt;Authentication&lt;/code&gt; &amp;gt; &lt;code&gt;Login Method&lt;/code&gt; in your &lt;strong&gt;Frontegg dashboard&lt;/strong&gt;, add a url back to your app.&lt;/p&gt;

&lt;p&gt;For example, when running in Vite dev mode (i.e., &lt;code&gt;npm run dev&lt;/code&gt;):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;http://localhost:5173/oauth/callback
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;*Modify the hostname and port as needed if you've changed from the defaults or are running in other modes.&lt;/p&gt;

&lt;h3&gt;
  
  
  CORS &amp;amp; Allowed Origins
&lt;/h3&gt;

&lt;p&gt;If you don't configure this, you may open your browser's console to see a bunch of &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary/CORS" rel="noopener noreferrer"&gt;'CORS'&lt;/a&gt; errors that say something like:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;Cross-Origin Request Blocked:
The Same Origin Policy disallows reading the remote resource at
https://app-abc123.frontegg.com/frontegg/oauth/token.
&lt;span class="o"&gt;(&lt;/span&gt;Reason: CORS header ‘Access-Control-Allow-Origin’ missing&lt;span class="o"&gt;)&lt;/span&gt;&lt;span class="nb"&gt;.&lt;/span&gt;
Status code: 204.
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The solution is to add your app's &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary/Origin" rel="noopener noreferrer"&gt;origin&lt;/a&gt; as an 'Allowed Origin' which lets Frontegg know that it's okay to share (potentially) sensitive information there.&lt;/p&gt;

&lt;h4&gt;
  
  
  How to Configure Allowed Origins in the Frontegg Dashboard
&lt;/h4&gt;

&lt;p&gt;Under &lt;code&gt;Configurations&lt;/code&gt; &amp;gt; &lt;code&gt;Keys &amp;amp; domains&lt;/code&gt; &amp;gt; &lt;code&gt;Domains&lt;/code&gt; tab &amp;gt; &lt;code&gt;Allowed Origins&lt;/code&gt; section in your &lt;strong&gt;Frontegg dashboard&lt;/strong&gt;, add your app's origin (the scheme, domain, and port parts of the url: e.g., &lt;a href="http://localhost:5173" rel="noopener noreferrer"&gt;http://localhost:5173&lt;/a&gt; or &lt;a href="https://example.com" rel="noopener noreferrer"&gt;https://example.com&lt;/a&gt;).&lt;/p&gt;

&lt;h3&gt;
  
  
  Required Environment Variables
&lt;/h3&gt;

&lt;p&gt;These are the 3 environment variables &lt;strong&gt;necessary&lt;/strong&gt; for integrating Frontegg along with where to navigate in the admin portal to find their values:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;code&gt;VITE_FRONTEGG_BASE_URL&lt;/code&gt;

&lt;ul&gt;
&lt;li&gt;"Keys &amp;amp; Domains" &amp;gt; "Domains" tab, in the "Frontegg Domain" section labeled as the "Domain Name"&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;VITE_FRONTEGG_CLIENT_ID&lt;/code&gt;

&lt;ul&gt;
&lt;li&gt;"Keys &amp;amp; Domains" &amp;gt; "General" tab, in the "API Key" section labeled as the "Client ID"&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;VITE_FRONTEGG_APP_ID&lt;/code&gt;

&lt;ul&gt;
&lt;li&gt;App ID's are unique per application and can be found by opening a particular Application in the Frontegg Dashboard.&lt;/li&gt;
&lt;li&gt;"Applications" &amp;gt; {name_of_app} &amp;gt; "Settings" tab labeled as the "ID"&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;code&gt;.env.Example&lt;/code&gt; contains the required Frontegg variables used in the app that you can use by simply swapping in your actual config values for the placeholder values.&lt;/p&gt;

&lt;p&gt;To use the template,&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;create a copy of the file and name it &lt;code&gt;.env&lt;/code&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Vite uses &lt;a href="https://github.com/motdotla/dotenv" rel="noopener noreferrer"&gt;dotenv&lt;/a&gt; to automatically &lt;a href="https://vite.dev/guide/env-and-mode.html#env-files" rel="noopener noreferrer"&gt;load the variables in the &lt;code&gt;.env&lt;/code&gt; file&lt;/a&gt;\*&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;p&gt;replace the placeholder values with your Frontegg details:&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h4&gt;
  
  
  The &lt;code&gt;.env&lt;/code&gt; file Template
&lt;/h4&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;################################################################################
### FRONTEGG CONFIG ###
################################################################################
# ! The 'VITE_' prefix exposes values client-side. !
# This is necessary for Base URL, Client ID, and App ID for the Frontegg React SDK, but take care
# not to expose any secrets!
#
# The "Base URL" and "Client ID" values can be found in the Frontegg Dashboard
# under "Keys &amp;amp; Domains".
#
# "Keys &amp;amp; Domains" &amp;gt; "Domains" &amp;gt; "Domain Name"
# Under the "Domains" tab, in the "Frontegg Domain" section labeled as the "Domain Name"
VITE_FRONTEGG_BASE_URL='https://app-rndCharsHere.frontegg.com'
#
# "Keys &amp;amp; Domains" &amp;gt; "General" &amp;gt; "Client ID"
# Under "General" tab, in the "API Key" section labeled as the "Client ID"
VITE_FRONTEGG_CLIENT_ID='looks-like-a-rnd-uuid'
#
#
# App ID's are unique per application and can be found by opening a particular Application in the
# Frontegg Dashboard.
#
# "Applications" &amp;gt; {name_of_app} &amp;gt; "Settings" &amp;gt; "App ID"
# Under the "Settings" tab labeled as the "ID"
VITE_FRONTEGG_APP_ID='looks-like-a-rnd-uuid-too'
################################################################################
### FRONTEGG CONFIG ###
################################################################################
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h5&gt;
  
  
  CAUTION
&lt;/h5&gt;

&lt;p&gt;*The &lt;code&gt;VITE_&lt;/code&gt; prefix exposes environment variables client-side!&lt;/p&gt;

&lt;p&gt;🤫 Be careful not to expose any secrets! This is what we want for the 3 variables above, but be careful when adding more! And, make sure you add it to your &lt;code&gt;.gitignore\&lt;/code&gt;, if using git for source control and a public repo, if you add any sort of secrets to avoid accidentally publishing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Install
&lt;/h2&gt;

&lt;p&gt;Install required packages with npm: *yarn v2+ may cause some strange and seemingly unrelated errors when trying to run the app. It's currently being investigated. It's suggested to use &lt;code&gt;npm\&lt;/code&gt; for now&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  Running the App
&lt;/h2&gt;

&lt;p&gt;Start the dev server as you would with any Vite React app by running:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm run dev
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In your browser, navigate to &lt;code&gt;http://localhost:5173&lt;/code&gt;* &lt;br&gt;
*or the url printed by Vite once running&lt;/p&gt;

&lt;h2&gt;
  
  
  If Everything Goes Smoothly 🤞
&lt;/h2&gt;

&lt;p&gt;Vite + React + Frontegg&lt;/p&gt;

&lt;p&gt;You should see the vite React template...  &lt;em&gt;plus a little more&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;When you open your running app in the browser, you should land on a page that looks like the gif at the top of this readme, i.e., the Vite React template PLUS some Frontegg parts like the logo and &lt;code&gt;login&lt;/code&gt; button.&lt;/p&gt;

&lt;p&gt;*If you need help creating a Frontegg &lt;strong&gt;Account&lt;/strong&gt; with a &lt;strong&gt;User&lt;/strong&gt; with the &lt;strong&gt;Application&lt;/strong&gt; assigned, check out the next section for help!&lt;/p&gt;

&lt;p&gt;Clicking on the &lt;code&gt;login&lt;/code&gt; button should bring you to your login page, customizable via the &lt;a href="https://developers.frontegg.com/guides/login-box/intro" rel="noopener noreferrer"&gt;Login Box Builder&lt;/a&gt; in the admin portal.&lt;/p&gt;

&lt;p&gt;After successfully logging in, you should be redirected back to the original page with the &lt;code&gt;login&lt;/code&gt; button replaced with a &lt;code&gt;logout&lt;/code&gt; button and the logged in user's email displayed.&lt;/p&gt;

&lt;h2&gt;
  
  
  Trying it Out
&lt;/h2&gt;

&lt;p&gt;To test it out (a.k.a. to try logging in), you'll need an &lt;strong&gt;Account&lt;/strong&gt; with a &lt;strong&gt;User&lt;/strong&gt;!&lt;/p&gt;

&lt;h3&gt;
  
  
  Create an 'Account'
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Under &lt;code&gt;Management&lt;/code&gt; &amp;gt; &lt;code&gt;Accounts&lt;/code&gt; in the dashboard, create a new &lt;a href="https://developers.frontegg.com/guides/management/manage-accounts/overview" rel="noopener noreferrer"&gt;Account&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;Open your newly created &lt;code&gt;Account&lt;/code&gt; and click on the &lt;code&gt;Applications&lt;/code&gt; tab.&lt;/li&gt;
&lt;li&gt;If you don't see your Application here:

&lt;ol&gt;
&lt;li&gt;Click on &lt;code&gt;Assign applications&lt;/code&gt; to allow users in this &lt;strong&gt;Account&lt;/strong&gt; to authenticate via your &lt;strong&gt;Application&lt;/strong&gt;.&lt;a href="https://developers.frontegg.com/guides/management/multi-apps/apps-accounts-management" rel="noopener noreferrer"&gt;1&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Select the Application configuration which you're using.&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Create a user:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;Under &lt;code&gt;Management &amp;gt; Users&lt;/code&gt; (or on a specific &lt;strong&gt;Account's&lt;/strong&gt; page under the &lt;code&gt;Users&lt;/code&gt; tab), click the &lt;code&gt;Create user&lt;/code&gt; button.&lt;a href="https://developers.frontegg.com/guides/management/multi-apps/apps-users-management" rel="noopener noreferrer"&gt;2&lt;/a&gt;

&lt;ol&gt;
&lt;li&gt;Make sure your app is added to the list of Applications in the create user modal. It needs to be assigned to this Account first, though, otherwise it won't be available to select.&lt;/li&gt;
&lt;li&gt;And, if you started from the &lt;code&gt;Users&lt;/code&gt; page, make sure you add the &lt;strong&gt;Account&lt;/strong&gt; you're using to the list in the modal.

&lt;ol&gt;
&lt;li&gt;Starting from the &lt;code&gt;Users&lt;/code&gt; tab of a specific &lt;strong&gt;Account&lt;/strong&gt; connects the user to that &lt;strong&gt;Account&lt;/strong&gt; right away.&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;Inviting by email provides an easy way to start testing. Once you've successfully created the user, you'll receive a link to the corresponding email to activate the account.&lt;a href="https://developers.frontegg.com/guides/management/manage-users/user-invitation" rel="noopener noreferrer"&gt;3&lt;/a&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;h3&gt;
  
  
  Run the app and login
&lt;/h3&gt;

&lt;p&gt;Run the app (e.g., &lt;code&gt;npm run dev&lt;/code&gt;) and open the app in a browser where you should see a page with the three logos and some stuff below (gif shown at the top).&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;p&gt;Clicking the login button should redirect you to your Frontegg login page.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;This is what's referred to as the "Hosted Login" (as opposed to the "Embedded Login"&lt;a href="https://developers.frontegg.com/guides/env-settings/hosted-embedded" rel="noopener noreferrer"&gt;4&lt;/a&gt;). You can change the UI using the "Login Builder" found in the dashboard.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;p&gt;After successfully authenticating, you should be brought back to the app (localhost:5173 in dev mode),&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;With a small difference indicating you've logged in!&lt;/li&gt;
&lt;li&gt;The &lt;code&gt;Login&lt;/code&gt; button should be replaced with a &lt;code&gt;Logout&lt;/code&gt; button and the email of the user you just authenticated with.&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  What to do in case...
&lt;/h2&gt;

&lt;h3&gt;
  
  
  First Debug Steps
&lt;/h3&gt;

&lt;p&gt;There are a lot of different values that are usually mostly random strings used in a lot of different places, so it's easy to accidentally use the wrong value for several reasons.&lt;/p&gt;

&lt;p&gt;Double check the following are match between your code and what's in the Frontegg dashboard:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Environment Variables&lt;/li&gt;
&lt;li&gt;App URL&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;redirect_uri&lt;/code&gt; (more below)&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;code&gt;redirect_uri&lt;/code&gt; not found
&lt;/h3&gt;

&lt;p&gt;Hit the dreaded &lt;code&gt;redirect_uri&lt;/code&gt; not found error? Don't worry, everyone using OAuth 2/OIDC hits at some point. I can't seem to get enough of it. But, it's an important part of how the security of  &lt;a href="https://datatracker.ietf.org/doc/html/rfc6749" rel="noopener noreferrer"&gt;OAuth 2&lt;/a&gt;, and therefore &lt;a href="https://openid.net/specs/openid-connect-core-1_0.html" rel="noopener noreferrer"&gt;OIDC&lt;/a&gt; (OIDC is a layer built on top of OAuth 2), works&lt;/p&gt;

&lt;p&gt;First, check that everything looks as expected from the step above in the &lt;code&gt;Configuring Frontegg&lt;/code&gt; section: &lt;em&gt;Don't forget to add your &lt;code&gt;redirect_uri&lt;/code&gt;!&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  User is not associated with the requested application
&lt;/h3&gt;

&lt;p&gt;This means the User you tried signing in with belongs to an Account which doesn't have the Application linked. In other words, the Application with the corresponding App ID you used for the &lt;code&gt;Client ID&lt;/code&gt; in the environment variables needs to be assigned to an Account which the User belongs to. If you're user does belong to an Account where the Application is linked. Find the User and open the context menu (3 dots at the end of the User's row) and click &lt;code&gt;Edit applications&lt;/code&gt; and assign the corresponding Application. This can happen if the Application is assigned to the Account &lt;em&gt;after&lt;/em&gt; the User was already added there.&lt;/p&gt;

&lt;h2&gt;
  
  
  More Info
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Minimal React Sample
&lt;/h3&gt;

&lt;p&gt;To help make it easier to focus on the pieces relevant for integrating Frontegg, this sample app is simply the Vite React (Typescript) Template with a few additions. &lt;a href="https://vite.dev/guide/#scaffolding-your-first-vite-project" rel="noopener noreferrer"&gt;The Vite.dev docs&lt;/a&gt; are a great place to start if you want to learn more about the surrounding "non-Frontegg" pieces.&lt;/p&gt;

&lt;h4&gt;
  
  
  Goal
&lt;/h4&gt;

&lt;p&gt;The goal of this article and the accompanying sample app is to remove everything that’s not necessary to start exploring or evaluating Frontegg in an actual app, an app that you can test with, play with, share, blow up, and maybe (hopefully?) learn from.&lt;/p&gt;

&lt;h4&gt;
  
  
  What to Expect
&lt;/h4&gt;

&lt;p&gt;Following the guide here or the one in the &lt;a href="https://github.com/akdombrowski/frontegg-vite-react-ts/?tab=readme-ov-file#readme" rel="noopener noreferrer"&gt;repo's README&lt;/a&gt; to learn how to integrate Frontegg into a React app. And, since it makes use of the cloud-hosted login page (Frontegg also provides an “embedded” option for maximal control), you, or someone you invite, can make changes from the Frontegg dashboard and have them immediately reflect in the app without you touching any bit of code.&lt;/p&gt;

&lt;h4&gt;
  
  
  The starting point
&lt;/h4&gt;

&lt;p&gt;Is the &lt;a href="https://vite.dev/guide/#scaffolding-your-first-vite-project" rel="noopener noreferrer"&gt;Vite React with Typescript template&lt;/a&gt; app. capabilities it makes up for in you over that first blocker to seeing the possibilities of what you can accomplish with Frontegg’s platform.&lt;/p&gt;

&lt;h2&gt;
  
  
  Steps Summary
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. The necessary dependencies&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Frontegg React SDK

&lt;ol&gt;
&lt;li&gt;@frontegg/react&lt;/li&gt;
&lt;li&gt;Recommended to use npm at it is tested and while some kinks are being worked out with compatibility with yarn v2+&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;li&gt;React Router

&lt;ol&gt;
&lt;li&gt;react-router-dom&lt;/li&gt;
&lt;/ol&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;2. Import the Frontegg Context and Components:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Import the necessary components from the Frontegg React SDK into your React application. This typically includes a context provider and hooks for accessing authentication state and functions.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. Wrap Your Application with the Frontegg Provider:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Wrap your root React component with the Frontegg provider component. This will make the authentication context available throughout your application.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;4. Configure the Frontegg Provider:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Pass your Frontegg application ID and other relevant configuration options to the Frontegg provider component.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;5. Add Login and Logout Functionality:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use the login and logout functions provided by the Frontegg hooks to add login and logout buttons or links to your application.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;6. Protect Routes and Components:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use the authentication state provided by the Frontegg hooks to conditionally render routes or components based on whether the user is logged in or not.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;7. Display or Utilize User Information:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Use the user object provided by the Frontegg hooks to display the user's name, email, or other relevant information in your application.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;9. Customize the User Interface:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Frontegg often provides customizable UI components for login, registration, and profile management. Use these components or build your own to match the design of your application.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;10. Consider Advanced Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Explore advanced features provided by Frontegg, such as social logins, multi-factor authentication, role-based access control, and audit logs. These features can enhance the security and functionality of your application.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Key Points and Benefits of using Frontegg for Authentication in your client-side React App
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Simplifies Authentication:&lt;/strong&gt; Frontegg handles the complexities of authentication, allowing you to focus on building your application's core features.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pre-Built UI Components:&lt;/strong&gt; Frontegg often provides pre-built UI components for login, registration, and self-service management, saving you development time.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Customization:&lt;/strong&gt; Frontegg allows you to customize the UI and behavior of the authentication flow to match your application's design and requirements.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Security:&lt;/strong&gt; Frontegg implements security best practices to protect your application and user data.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Scalability:&lt;/strong&gt; Frontegg's cloud-based infrastructure can handle the authentication needs of applications of all sizes.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Resources
&lt;/h2&gt;

&lt;p&gt;Drop any questions in the comments!&lt;/p&gt;

&lt;h3&gt;
  
  
  Frontegg
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://developers.frontegg.com/sdks/frontend/react/hosted-login" rel="noopener noreferrer"&gt;@frontegg/react Docs&lt;/a&gt;&lt;br&gt;
&lt;a href="https://www.npmjs.com/package/@frontegg/react" rel="noopener noreferrer"&gt;@frontegg/react on npm&lt;/a&gt;&lt;br&gt;
&lt;a href="https://developers.frontegg.com/guides/login-box/intro" rel="noopener noreferrer"&gt;Frontegg's Hosted Login Page Intro&lt;/a&gt;&lt;br&gt;
&lt;a href="https://portal.frontegg.com/signup" rel="noopener noreferrer"&gt;Free Trial Signup&lt;/a&gt;&lt;br&gt;
&lt;a href="https://join.slack.com/t/frontegg-community/shared_invite/zt-e1oxi1vn-SZErBZcwHcbgj4vrwRIp5A" rel="noopener noreferrer"&gt;Slack Channel&lt;/a&gt;&lt;br&gt;
&lt;a href="https://github.com/frontegg" rel="noopener noreferrer"&gt;Frontegg on GitHub&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Vite
&lt;/h3&gt;

&lt;p&gt;To help make it easier to focus on the pieces relevant for integrating Frontegg, this sample app is simply the Vite React (Typescript) Template with a few additions. &lt;a href="https://vite.dev/guide/#scaffolding-your-first-vite-project" rel="noopener noreferrer"&gt;The Vite.dev docs&lt;/a&gt; are a great place to start if you want to learn more about the surrounding "non-Frontegg" pieces.&lt;/p&gt;

&lt;h3&gt;
  
  
  Other
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://openid.net/developers/how-connect-works/" rel="noopener noreferrer"&gt;What is OpenID Connect&lt;/a&gt;&lt;/p&gt;

</description>
      <category>authentication</category>
      <category>security</category>
      <category>react</category>
      <category>vite</category>
    </item>
  </channel>
</rss>
