docs: add tutorial on how to get user data

docs/docs/guides/tutorials/userData.mdx

@@ -0,0 +1,131 @@
+---
+title: Getting user data
+sidebar_label: User data
+keywords: [user, user ID, userID, email]
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+Every project has different needs when handling user onboarding. The following sections show how to get the user data from Hanko.
+
+:::info
+**It's good to remember that the user ID is the immmutable identifier**
+
+The primary email address can be changed, therefore when handling user registration, the user `id` should be used to
+dermine if it's a known user.
+:::
+
+## Get user data on the Frontend
+
+If you only need the user data for a frontend usage, you can use `Hanko.user.getCurrent()` function from the
+[hanko-frontend-sdk](https://www.npmjs.com/package/@teamhanko/hanko-frontend-sdk) (it is also re-exported from
+[hanko-elements](https://www.npmjs.com/package/@teamhanko/hanko-elements)):
+
+```mdx-code-block
+<Tabs>
+<TabItem value="next.js" label="Next.js">
+```
+
+```js
+"use client";
+
+import { Hanko } from "@teamhanko/hanko-elements";
+
+const hankoApi = <YOUR_HANKO_API_URL>;
+const hanko = new Hanko(hankoApi);
+
+const {id, email} = await hanko.user.getCurrent();
+
+console.log(`user-id: ${id}, email: ${email}`);
+```
+
+```mdx-code-block
+</TabItem>
+
+</Tabs>
+```
+
+:::info
+Please keep in mind that if you create a function to get the
+user data, you will be fetching data from the API again every
+time you call the function. We advise you to make sure the function
+is only called once for every user authentication.
+:::
+
+## Get user data on the Backend
+
+### Get user ID from the JWT
+
+The Hanko API sends back a cookie upon successful authentication, which is then sent to the RP backend for each subsequent
+request. The cookie contains a JWT, one of the things we can get from this JWT is the user ID, we can use [jose library](https://www.npmjs.com/package/jose)
+to decode the value of such JWT:
+
+```mdx-code-block
+<Tabs>
+<TabItem value="next.js" label="Next.js">
+```
+
+```js
+import { cookies } from "next/headers";
+import * as jose from "jose";
+
+export async function userId() {
+  const token = cookies().get("hanko")?.value;
+  const payload = jose.decodeJwt(token ?? "");
+
+  const userID = payload.sub;
+  return userID;
+}
+```
+
+```mdx-code-block
+</TabItem>
+
+</Tabs>
+```
+
+### Get user data using the Hanko Admin API
+
+The [Hanko Admin API](https://docs.hanko.io/api/admin) provides detailed information about the status, user management, metrics and more. In this example we will focus on
+getting the data from a specific user.
+
+To get a specific user data, call the `/users/{id}` endpoint of the Hanko Admin API, where `id` is the user id previously obtained from the JWT.
+
+:::info
+On Hanko Cloud the Hanko Admin API is a paid feature and must be enabled separately.
+
+You also need an API key `secret` to access the Hanko Admin API. You can generate one under the `Settings/API Keys` section of your project.
+Keep in mind, that the API key `secret` is only showed once, so make sure to store it in a safe place, like an enviromental variable as shown in the following example.
+:::
+
+```mdx-code-block
+<Tabs>
+<TabItem value="next.js" label="Next.js">
+```
+
+```js
+const getUserData = async () => {
+  const adminAPI = process.env.ADMIN_API;
+  const adminSecret = process.env.ADMIN_SECRET;
+  const options = {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${adminSecret}`,
+    },
+  };
+
+  const response = await fetch(`${adminAPI}/users/${userID}`, options);
+
+  return response.json();
+};
+
+const userData = await getUserData();
+console.log("user data:", userData);
+```
+
+```mdx-code-block
+</TabItem>
+
+</Tabs>
+```

docs/sidebars.js

@@ -69,7 +69,7 @@ const sidebars = {
     {
       type: "category",
       label: "Tutorials",
-      items: ["guides/tutorials/php", "guides/tutorials/nextjs"],
+      items: ["guides/tutorials/php", "guides/tutorials/nextjs", "guides/tutorials/userData"],
     },
   ],
 };