Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update readme #96

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

update readme #96

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 24 additions & 14 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,19 @@ Use the following link to directly deploy this demo to Vercel. You will need a V
<!-- [TODO insert youtube video here] -->

### Environment Variable Setup

After the repository is created, you will need to do the following steps to get the environment variables setup:

1. Create a new [GitHub personal access token (PAT)](https://github.com/settings/personal-access-tokens/new) with content access to the new repository and copy the token as the value for the `GITHUB_PERSONAL_ACCESS_TOKEN` environment variable.
2. Fill out the `NEXTAUTH_SECRET` environment variable with a random string.
3. Fill out the `NEXTAUTH_CREDENTIALS_KEY` environment variable with the key you want to use for storing user credentials in the KV database (i.e. `tinacms_users`).

### Next Step

- Go to `<YourVercelUrl>/admin/` and setup your first user.
- Now you can start editing your content!
- If needed you can [add more users](#creating-a-new-authorized-user)

# Local Development

## Requirements
Expand Down Expand Up @@ -84,16 +91,16 @@ yarn dev:prod

## Environment Variables

| Variable | Description |
| -------- |--------------------------------------------------------------------------------------------------------------------------------------------|
| `GITHUB_OWNER` | The owner of the repository you want to use for your content. Required in local development. Defaults to VERCEL_GIT_REPO_OWNER in Vercel. |
| `GITHUB_REPO` | The name of the repository you want to use for your content. Required in local development. Defaults to VERCEL_GIT_REPO_SLUG in Vercel. |
| `GITHUB_BRANCH` | The branch of the repository you want to use for your content. Defaults to `VERCEL_GIT_COMMIT_REF` or `main` if not specified. |
| Variable | Description |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `GITHUB_OWNER` | The owner of the repository you want to use for your content. Required in local development. Defaults to VERCEL_GIT_REPO_OWNER in Vercel. |
| `GITHUB_REPO` | The name of the repository you want to use for your content. Required in local development. Defaults to VERCEL_GIT_REPO_SLUG in Vercel. |
| `GITHUB_BRANCH` | The branch of the repository you want to use for your content. Defaults to `VERCEL_GIT_COMMIT_REF` or `main` if not specified. |
| `GITHUB_PERSONAL_ACCESS_TOKEN` | A [personal access token](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token) with `repo` access. |
| `NEXTAUTH_SECRET` | A secret used by NextAuth.js to encrypt the NextAuth.js JWT. |
| `KV_REST_API_URL` | The URL of the Vercel KV database. |
| `KV_REST_API_TOKEN` | The token for authenticating to the Vercel KV database. |
| `NEXT_PUBLIC_TINA_CLIENT_ID` | The client id for your Tina Cloud application. Only required for Tina Cloud authorization. |
| `NEXTAUTH_SECRET` | A secret used by NextAuth.js to encrypt the NextAuth.js JWT. |
| `KV_REST_API_URL` | The URL of the Vercel KV database. |
| `KV_REST_API_TOKEN` | The token for authenticating to the Vercel KV database. |
| `NEXT_PUBLIC_TINA_CLIENT_ID` | The client id for your Tina Cloud application. Only required for Tina Cloud authorization. |

## Deploying to Vercel

Expand Down Expand Up @@ -135,7 +142,7 @@ NextAuth providers can be used, as well other auth solutions.

# Using Tina Cloud for Authorization

Tina Cloud can be used to manage users and authorization for your TinaCMS application. To use Tina Cloud for auth, you will need to create a new project in the Tina Cloud [dashboard](https://app.tina.io/projects). You will be required to specify a repository, but since the data layer is managed by Vercel KV, you can use any repository.
Tina Cloud can be used to manage users and authorization for your TinaCMS application. To use Tina Cloud for auth, you will need to create a new project in the Tina Cloud [dashboard](https://app.tina.io/projects). You will be required to specify a repository, but since the data layer is managed by Vercel KV, you can use any repository.

## Configuration

Expand All @@ -144,6 +151,7 @@ Once you have created an application, you will need to add the following environ
```env
NEXT_PUBLIC_TINA_CLIENT_ID=***
```

The value for `NEXT_PUBLIC_TINA_CLIENT_ID` can be found in the Tina Cloud dashboard on the "Overview" page for your project.

In your tina configuration, first remove or comment out the following properties:
Expand All @@ -155,16 +163,17 @@ In your tina configuration, first remove or comment out the following properties
- `admin.auth.logout`

Then add the following property:
```js

```js
{
...
clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID,
}
```
```

## Updating the GraphQL endpoint

The GraphQL endpoint is configured to use NextAuth by default. To use Tina Cloud, you will need to update the endpoint in `pages/api/gql.ts` to use Tina Cloud's auth.
The GraphQL endpoint is configured to use NextAuth by default. To use Tina Cloud, you will need to update the endpoint in `pages/api/gql.ts` to use Tina Cloud's auth.

The updated file should look like this:

Expand Down Expand Up @@ -204,6 +213,7 @@ It's possible to use MongoDB as the data layer for your TinaCMS application inst
```env
`MONGODB_URI` is the connection string to your MongoDB database. You can use [MongoDB Atlas](https://www.mongodb.com/cloud/atlas) to get a free database.
```

Next you will need to update the `tina/database.ts` to use the MongoDB level implementation instead of the Redis level implementation.

```ts
Expand Down