# Announcing MCP Authentication: secure your MCP servers with PropelAuth

A few days ago, Stripe open sourced [Markdoc](https://markdoc.io/?ref=propelauth.mymidnight.blog) which is a Markdown-based authoring framework. It’s used to power Stripe’s docs which is already a really strong selling point, but one of the first things that caught my eye was this:

```javascript
// markdoc/tags.js

import { Button } from '../components/Button';

export const button = {
  render: Button,
};
```

```markdown
[//]: <> (pages/docs/example.md)

We can easily add React components to our markdown files:
{% button %}Button Text{% /button %}
```

(based on [this](https://markdoc.io/docs/nextjs?ref=propelauth.mymidnight.blog#tags) example) You can make your own React components and pretty easily embed them in your markdown files. Let’s look at some interesting ways we can use this.

### [Using React hooks](/content/post/add-personalized-content-to-your-docs-with-markdoc-next-js-and-propelauth#using-react-hooks/index.html)

We can start off by displaying the current time and using **useEffect** to keep updating it. Start by following the instructions to set up a new project with [Next.js](https://markdoc.io/docs/nextjs?ref=propelauth.mymidnight.blog) or [React](https://markdoc.io/docs/examples/react?ref=propelauth.mymidnight.blog). In my case, I used Next.js.

Then we can create our component:

```javascript
import {useEffect, useState} from "react";

const DateComponent = () => {
    const [date, setDate] = useState(new Date())

// Update the date every second
    useEffect(() => {
        const timer = setInterval(() => {
            setDate(new Date())
        }, 1000)

// Clear the timer when we unmount
        return () => { clearInterval(timer) }
    }, [])

return <div>{date.toLocaleString()}</div>
}

export default DateComponent
```

Afterwards, in **markdoc/tags.js**, we export a tag named date which references our **DateComponent**

```javascript
import DateComponent from "../components/DateComponent";

export const date = {
    render: DateComponent,
};
```

And finally, we can create a markdown file ( **pages/docs/date-example.md**) and use the date tag:

```markdown
# Date tag:

{% date /%}
```

.gif)

Pretty easy! If you wanted a more practical use case, you could do something like displaying the age of the post with [humanize-duration](https://www.npmjs.com/package/humanize-duration?ref=propelauth.mymidnight.blog).

### [Adding an API Key to your documentation](/content/post/add-personalized-content-to-your-docs-with-markdoc-next-js-and-propelauth#adding-an-api-key-to-your-documentation/index.html)

We can get fancier. Since our component can really do whatever we want, we can fetch information and display it directly in our docs.

One nice feature dev tools documentation often has is the user’s live API key embedded in the docs if they are logged in.

.gif)

To do this, we can start by just making a fetch to a Next.js API route that we’ll create:

```javascript
import {useEffect, useState} from "react";

const ApiKey = () => {
    const [apiKey, setApiKey] = useState(null)

useEffect(() => {
        fetchApiKey(accessToken).then(setApiKey)
    }, [])

if (apiKey) {
        return <pre className="apiKey">{apiKey}</pre>
    } else {
        return <pre className="apiKey"><Loading/></pre>
    }
}

function fetchApiKey() {
    return fetch("/api/apikey", {
        method: "GET",
    }).then(res => res.text())
}

export default ApiKey
```

This doesn’t quite make sense though, because we haven’t added in any user information so we won’t know whose API key to fetch. We can use [PropelAuth](/content/?ref=propelauth.mymidnight.blog) to quickly turn this into an **authenticated** request either for a user:

```javascript
import {useAuthInfo, useRedirectFunctions} from "@propelauth/react";
import {useEffect, useState} from "react";

const ApiKey = () => {
    const {loading, isLoggedIn, accessToken} = useAuthInfo()
    const {redirectToLoginPage} = useRedirectFunctions()
    const [apiKey, setApiKey] = useState(null)

// Check to see if they are logged in before we fetch
    useEffect(() => {
        if (accessToken) {
            fetchApiKey(accessToken).then(setApiKey)
        } else {
            setApiKey(null)
        }
    }, [accessToken])

// New state: if they aren't logged in display a link
    //   to PropelAuth's hosted login screen so they can login
    if (apiKey) {
        return <pre className="apiKey">{apiKey}</pre>
    } else if (!loading && !isLoggedIn) {
        return <pre className="apiKey">
              <a href="#" onClick={redirectToLoginPage}>Login</a> to view your API key
          </pre>
    } else {
        return <pre className="apiKey"><Loading/></pre>
    }
}

// fetchApiKey now takes in an accessToken and passes it in the header
function fetchApiKey(accessToken) {
    return fetch("/api/apikey", {
        method: "GET",
        headers: {"Authorization": `Bearer ${accessToken}`}
    }).then(res => res.text())
}

export default ApiKey
```

or for an organization that the user is a member of:

```javascript
const {loading, isLoggedIn, accessToken, orgHelper} = useAuthInfo()

useEffect(() => {
    if (accessToken) {
        // Get the API key for an organization that the user is a member of
        const orgId = orgHelper.getSelectedOrg()
        fetchApiKey(orgId, accessToken).then(setApiKey)
    } else {
        setApiKey(null)
    }
}, [accessToken])
```

The API route we’ll create to support these use cases will look like:

```javascript
export default async function handler(req, res) {
    // Verifies that a valid accessToken is provided
    await requireUser(req, res);

// req.user comes from requireUser
    const apiKey = await fetchApiKeyFromSecretManager(req.user.userId);
    res.status(200).send(apiKey)
}
```

and you can follow either our [Next.js guide](/content/post/fast-serverless-authentication-with-next-js-and-propelauth?ref=propelauth.mymidnight.blog) or our [documentation](https://docs.propelauth.com/?ref=propelauth.mymidnight.blog) to learn more and customize it for your use case.

Just like the date tag, we’ll need to add it to **markdoc/tags.js**, and this markdown file:

````markdown
# ApiKey tag:

Use your api key with our cool library:

```javascript
myLibrary.init({apiKey: {% apiKey /%}})
```
````

Produces this:

.gif)

### [Summary](/content/post/add-personalized-content-to-your-docs-with-markdoc-next-js-and-propelauth#summary/index.html)

The ability to quickly and easily add arbitrary React components to a markdown file is really cool! It allows you to be really creative and easily add dynamic content to your markdown files.