add POST_LOGOUT_URI

Author: ksroda-sa

samples/react/login-pkce/.env.example

@@ -1,4 +1,5 @@
 VITE_ISSUER_URL=https://your-tenant.us.secureauth.com/your-workspace
 VITE_CLIENT_ID=your-client-id
 VITE_REDIRECT_URI=http://localhost:3000/callback
+VITE_POST_LOGOUT_URI=http://localhost:3000
 VITE_SCOPES=openid profile email

samples/react/login-pkce/src/App.tsx

@@ -9,6 +9,7 @@ const oidcConfig = {
   authority: import.meta.env.VITE_ISSUER_URL,
   client_id: import.meta.env.VITE_CLIENT_ID,
   redirect_uri: import.meta.env.VITE_REDIRECT_URI,
+  post_logout_redirect_uri: import.meta.env.VITE_POST_LOGOUT_URI,
   scope: import.meta.env.VITE_SCOPES,
 };
 // @snippet:step2:end
@@ -29,7 +30,10 @@ function AuthButtons() {
   if (auth.isAuthenticated) {
     return (
       <div>
-        <p>Welcome, {auth.user?.profile.name}</p>
+        <p>
+          Welcome, {auth.user?.profile.given_name}{" "}
+          {auth.user?.profile.family_name} ({auth.user?.profile.email})
+        </p>
         <button onClick={() => auth.signoutRedirect()}>Sign out</button>
       </div>
     );

samples/react/manifest.yaml

@@ -18,6 +18,8 @@ scenarios:
         value: "{{ISSUER_URL}}"
       - label: "Redirect URI"
         value: "{{REDIRECT_URI}}"
+      - label: "Post-Logout Redirect URI"
+        value: "{{POST_LOGOUT_URI}}"
       - label: "Scopes"
         value: "{{SCOPES}}"
       - label: "Grant"

snippet-manifest.yaml

@@ -19,8 +19,10 @@ scenarios:
         value: '{{ISSUER_URL}}'
       - label: Redirect URI
         value: '{{REDIRECT_URI}}'
+      - label: Post-Logout Redirect URI
+        value: '{{POST_LOGOUT_URI}}'
       - label: Scopes
-        value: openid profile email
+        value: '{{SCOPES}}'
       - label: Grant
         value: Authorization Code + PKCE
     frameworks:

snippets.json

@@ -13,26 +13,26 @@
         {
           "step": 2,
           "description": "Configure the OIDC client with your SecureAuth app settings",
-          "code": "const oidcConfig = {\n  authority: \"{{ISSUER_URL}}\",\n  client_id: \"{{CLIENT_ID}}\",\n  redirect_uri: \"{{REDIRECT_URI}}\",\n  scope: \"{{SCOPES}}\",\n};",
+          "code": "const oidcConfig = {\n  authority: \"{{ISSUER_URL}}\",\n  client_id: \"{{CLIENT_ID}}\",\n  redirect_uri: \"{{REDIRECT_URI}}\",\n  post_logout_redirect_uri: \"{{POST_LOGOUT_URI}}\",\n  scope: \"{{SCOPES}}\",\n};",
           "file": "src/App.tsx",
           "lang": "tsx",
-          "lines": "7-13"
+          "lines": "7-14"
         },
         {
           "step": 3,
           "description": "Add login and logout buttons that redirect to SecureAuth",
-          "code": "function AuthButtons() {\n  const auth = useAuth();\n\n  if (auth.isLoading) {\n    return <div>Loading...</div>;\n  }\n\n  if (auth.error) {\n    return <div>Error: {auth.error.message}</div>;\n  }\n\n  if (auth.isAuthenticated) {\n    return (\n      <div>\n        <p>Welcome, {auth.user?.profile.name}</p>\n        <button onClick={() => auth.removeUser()}>Sign out</button>\n      </div>\n    );\n  }\n\n  return <button onClick={() => auth.signinRedirect()}>Sign in</button>;\n}",
+          "code": "function AuthButtons() {\n  const auth = useAuth();\n\n  if (auth.isLoading) {\n    return <div>Loading...</div>;\n  }\n\n  if (auth.error) {\n    return <div>Error: {auth.error.message}</div>;\n  }\n\n  if (auth.isAuthenticated) {\n    return (\n      <div>\n        <p>\n          Welcome, {auth.user?.profile.given_name}{\" \"}\n          {auth.user?.profile.family_name} ({auth.user?.profile.email})\n        </p>\n        <button onClick={() => auth.signoutRedirect()}>Sign out</button>\n      </div>\n    );\n  }\n\n  return <button onClick={() => auth.signinRedirect()}>Sign in</button>;\n}",
           "file": "src/App.tsx",
           "lang": "tsx",
-          "lines": "17-39"
+          "lines": "18-43"
         },
         {
           "step": 4,
           "description": "Wrap your app with the AuthProvider to enable authentication",
           "code": "export default function App() {\n  return (\n    <AuthProvider {...oidcConfig}>\n      <h1>SecureAuth React PKCE Demo</h1>\n      <AuthButtons />\n    </AuthProvider>\n  );\n}",
           "file": "src/App.tsx",
           "lang": "tsx",
-          "lines": "43-51"
+          "lines": "47-55"
         }
       ],
       "framework": "react",