generated from garronej/ts-ci
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #9 from garronej/demo
Demo app: refactor tanstack as react-react
- Loading branch information
Showing
12 changed files
with
333 additions
and
238 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,34 +1,20 @@ | ||
| import { useMemo } from "react"; | ||
| import { createOidcProvider, useOidc } from "oidc-spa/react"; | ||
| import { decodeJwt } from "oidc-spa"; | ||
| import { createOidcProvider, createUseOidc } from "oidc-spa/react"; | ||
| import { z } from "zod"; | ||
|
|
||
| export const { OidcProvider, prOidc } = createOidcProvider({ | ||
| clientId: import.meta.env.VITE_OIDC_CLIENT_ID, | ||
| issuerUri: import.meta.env.VITE_OIDC_ISSUER | ||
| issuerUri: import.meta.env.VITE_OIDC_ISSUER, | ||
| publicUrl: import.meta.env.BASE_URL | ||
| }); | ||
|
|
||
| // Convenience hook to get the parsed idToken | ||
| // To call only when the user is logged in | ||
| export function useUser() { | ||
| const { oidc } = useOidc(); | ||
|
|
||
| if (!oidc.isUserLoggedIn) { | ||
| throw new Error("This hook should be used only on authenticated routes"); | ||
| } | ||
|
|
||
| // NOTE: When idToken changes, the component get re-rendered | ||
| // so idToken can be used in dependency arrays. ✅ | ||
| const { idToken } = oidc.getTokens(); | ||
|
|
||
| const user = useMemo( | ||
| () => | ||
| decodeJwt(idToken) as { | ||
| // Use https://jwt.io/ to tell what's in your idToken | ||
| sub: string; | ||
| preferred_username: string; | ||
| }, | ||
| [idToken] | ||
| ); | ||
|
|
||
| return { user }; | ||
| } | ||
| export const { useOidc } = createUseOidc({ | ||
| // This parameter is optional, it allows you to validate the shape of the idToken | ||
| // so that you can trust that oidcTokens.decodedIdToken is of the expected shape when the user is logged in. | ||
| // In most application you do not need to look into the JWT of the idToken on the frontend | ||
| // you usually obtain the user info by querying a GET /user endpoint with a authorization header | ||
| // like `Bearer <accessToken>`. | ||
| decodedIdTokenZodSchema: z.object({ | ||
| sub: z.string(), | ||
| preferred_username: z.string() | ||
| }) | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,14 @@ | ||
| import { useOidc } from "oidc"; | ||
|
|
||
| export function ProtectedPage() { | ||
| return <h1>Protected Page</h1>; | ||
| // Here we can safely assume that the user is logged in. | ||
| const { oidcTokens } = useOidc({ assertUserLoggedIn: true }); | ||
|
|
||
| return ( | ||
| <h4> | ||
| Hello {oidcTokens.decodedIdToken.preferred_username} | ||
| <br /> | ||
| The page you are currently viewing can only be accessed when you are authenticated. | ||
| </h4> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,18 @@ | ||
| import { Link } from "@tanstack/react-router"; | ||
| import reactLogo from "assets/react.svg"; | ||
| import viteLogo from "assets/vite.svg"; | ||
|
|
||
| export function PublicPage() { | ||
| return ( | ||
| <> | ||
| <h1>Public Page</h1> | ||
| <Link to="/protected">Link to protected route</Link> | ||
| <div> | ||
| <a href="https://vitejs.dev" target="_blank"> | ||
| <img src={viteLogo} className="logo" alt="Vite logo" /> | ||
| </a> | ||
| <a href="https://react.dev" target="_blank"> | ||
| <img src={reactLogo} className="logo react" alt="React logo" /> | ||
| </a> | ||
| </div> | ||
| <h4>This is a page that do not requires the user to be authenticated</h4> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { Link } from "@tanstack/react-router"; | ||
| import { useOidc } from "oidc"; | ||
|
|
||
| export function Header() { | ||
| const { isUserLoggedIn, login, logout, oidcTokens } = useOidc(); | ||
| return ( | ||
| <div | ||
| style={{ | ||
| display: "flex", | ||
| justifyContent: "space-between", | ||
| alignItems: "center", | ||
| position: "absolute", | ||
| top: 0, | ||
| left: 0, | ||
| width: "100%" | ||
| }} | ||
| > | ||
| <span>OIDC-SPA + Tanstack-router Starter</span> | ||
|
|
||
| <div> | ||
| <Link to="/"> | ||
| {({ isActive }) => ( | ||
| <span style={{ fontWeight: isActive ? "bold" : "normal" }}>Home</span> | ||
| )} | ||
| </Link> | ||
| | ||
| <Link to="/protected"> | ||
| {({ isActive }) => ( | ||
| <span style={{ fontWeight: isActive ? "bold" : "normal" }}> | ||
| My protected page | ||
| </span> | ||
| )} | ||
| </Link> | ||
| </div> | ||
|
|
||
| {isUserLoggedIn ? ( | ||
| <div> | ||
| <span>Hello {oidcTokens.decodedIdToken.preferred_username}</span> | ||
| | ||
| <button onClick={() => logout({ redirectTo: "home" })}>Logout</button> | ||
| </div> | ||
| ) : ( | ||
| <div> | ||
| <button onClick={() => login({ doesCurrentHrefRequiresAuth: false })}>Login</button> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,12 @@ | ||
| import reactLogo from "assets/react.svg"; | ||
| import viteLogo from "assets/vite.svg"; | ||
| import "./App.css"; | ||
| import { Outlet } from "@tanstack/react-router"; | ||
| import { AuthStatus } from "../AuthStatus"; | ||
| import { Header } from "./Header"; | ||
|
|
||
| export function Layout() { | ||
| return ( | ||
| <> | ||
| <div> | ||
| <a href="https://vitejs.dev" target="_blank"> | ||
| <img src={viteLogo} className="logo" alt="Vite logo" /> | ||
| </a> | ||
| <a href="https://react.dev" target="_blank"> | ||
| <img src={reactLogo} className="logo react" alt="React logo" /> | ||
| </a> | ||
| </div> | ||
| <Header /> | ||
| <Outlet /> | ||
| <AuthStatus /> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.