Authentication

Introduction to Authentication

When using Portive Cloud enabled components, you must provide an authToken.

For example, in the Wysimark Editor in React, it looks like this:

import { Editable, useEditor } from "@wysimark/react"
import { useState } from "react"

const MyComponent = () => {
  const [markdown, setMarkdown] = useState("# Hello World")
  const editor = useEditor({ authToken: "AUTH_TOKEN_GOES_HERE" })
  return <Editable editor={editor} value={markdown} onChange={setMarkdown} />
}

Generating Auth Tokens

Auth tokens can be generated by logging into your Portive admin account or via your server.

If you are using Next.js, you can skip to the Next.js Guide for Auth which provides specific instructions for Next.js.

To generate auth tokens on your server, install @portive/auth:

# yarn
yarn add @portive/auth

# npm
npm install --save @portive/auth

To create the Auth Token in JavaScript on the server you would use code like below.

We are assuming for this example that process.env.API_KEY is set to a Portive API Key.

JavaScript
import { createAuthToken } from "@portive/auth"

const authToken = createAuthToken(process.env.API_KEY, {
  expiresIn: "24h",
})

console.log(authToken)

In a real web application, the authToken would not be created in the main body of the JavaScript file as shown.

It would be generated in the code for an API endpoint and returned to the user after some authentication.

Let's assume that you create an API endpoint for your application at "/api/get-auth" that returns the Auth Token as { authToken: "xxxx" }.

In order for your app to get the auth token, you could create an async function that returns an authToken as the value for the authToken option. It might look something like the following example.

createCloudPlugin({
  options: {
    authToken: async () => {
      const response = await fetch("https://mysite.com/api/get-auth", {
        method: "POST",
      })
      const json = await response.json()
      return json.authToken
    },
  },
})

The example makes a POST request to https://mysite.com/api/get-auth, parses the response as JSON, and takes the authToken from the response.