Example: Custom profile component

_components/Profile.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { getUserClaims, getIdPAccessToken, getIdPJwt, getUserId } from '@redocly/developer-portal/ui';
+
+export function Profile() {
+  const claims = getUserClaims();
+  const { email } = claims;
+  const idpAccessToken = getIdPAccessToken();
+  const idpIdToken = getIdPJwt();
+
+  const [loading, setLoading] = React.useState(false);
+  const [data, setData] = React.useState(null);
+
+  React.useEffect(() => {
+    if (!claims) return;
+
+    run();
+
+    async function run() {
+      setLoading(true);
+      const resp = await fetch(`https://cors.redoc.ly/https://postman-echo.com/get?email=${email}`, {
+        headers: {
+          Authorization: idpIdToken,
+        },
+      });
+      const json = await resp.json();
+      setData(json);
+      setLoading(false);
+      // TODO: Error handling
+    }
+  }, []);
+
+  if (!claims) {
+    return 'You are not authorized';
+  }
+
+  if (loading) {
+    return <Wrapper><h2>Loading...</h2></Wrapper>
+  }
+
+  return (
+    <Wrapper>
+      <h2> Claims </h2>
+      <StyledPre>{JSON.stringify(claims, null, 2)}</StyledPre>
+      <h2> Response </h2>
+      <StyledPre>{loading ? 'Loading...' : JSON.stringify(data, null, 2)}</StyledPre>
+    </Wrapper>
+  );
+}
+
+const StyledPre = styled.pre`
+  background-color: #333;
+  color: white;
+  padding: 10px;
+`;
+
+const Wrapper = styled.div`
+  padding: 20px 100px;;
+`

developer-portal/custom-component.mdx

@@ -2,7 +2,7 @@
 title: Creating React Components
 ---
 
-import { Counter } from '../components/Counter.tsx'
+import { Counter } from '../_components/Counter.tsx'
 
 # Creating React components
 

developer-portal/mdx.mdx

@@ -69,5 +69,5 @@ What other components would you like to see?  Let us know.  We're adding new com
 ## Developing new components
 
 A developer familiar with React can create new components.
-We left a sample component at `/components/Counter.tsx`.
+We left a sample component at `/_components/Counter.tsx`.
 Inspect it and its usage at `/developer-portal/custom-component.mdx`.

profile.mdx

@@ -0,0 +1,6 @@
+import { FullWidthLayout } from '@redocly/developer-portal/ui';
+import { Profile } from './_components/Profile.tsx';
+
+export default FullWidthLayout;
+
+<Profile />

siteConfig.yaml

@@ -25,6 +25,21 @@ stylesheets:
   #  trackingId: UA-45997213-1
 #scripts:
 #  - ./static/intercom.js
+
+login:
+  label: Sign in
+  userAvatar: # can be false
+    claim: picture
+    fallbackLettersClaim: name
+  userLabel: # can be false, but one of those must be not false
+    claim: name
+    fallback: <unknown user>
+  menu:
+    - label: Profile
+      page: profile.mdx
+    - separatorLine: true
+    - label: Sign out
+      logout: true
 nav:
 
   - label: Training exercises