Skip to content

Commit

Permalink
chore(docs): compress v5 docs into v5.x
Browse files Browse the repository at this point in the history
  • Loading branch information
jtoar committed Jul 28, 2023
1 parent 360108e commit 43bbc27
Show file tree
Hide file tree
Showing 105 changed files with 186 additions and 60 deletions.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,16 @@ sidebar_label: Clerk

# Clerk Authentication

:::caution Did you set up Clerk a while ago?

If you set up Clerk a while ago, you may be using a deprecated `authDecoder` that's subject to rate limiting.
This decoder will be removed in the next major.
There's a new decoder you can use right now!
See the [migration guide](https://github.com/redwoodjs/redwood/releases/tag/v5.3.2) for how to upgrade.

:::


To get started, run the setup command:

```text
Expand All @@ -12,7 +22,7 @@ yarn rw setup auth clerk

This installs all the packages, writes all the files, and makes all the code modifications you need.
For a detailed explanation of all the api- and web-side changes that aren't exclusive to Clerk, see the top-level [Authentication](../authentication.md) doc.
There's one Clerk-specific thing we'll get to, but for now, let's focus on Clerk's side of things.
But for now, let's focus on Clerk's side of things.

If you don't have a Clerk account yet, now's the time to make one: navigate to https://clerk.dev, sign up, and create an application.
The defaults are good enough to get us going, but feel free to configure things as you wish.
Expand All @@ -27,9 +37,8 @@ How you get your API keys to production depends on your deploy provider.

:::

We're looking for two API keys.
Head over to the "Developers" section in the nav on the left and click "API Keys". Finally select RedwoodJS in the Framework dropdown in the Quick Copy section.
Do as it says and copy the two keys into your project's `.env` file:
After you create the application, you should be redirected to its dashboard where you should see the RedwoodJS logo.
Click on it and copy the two API keys it shows into your project's `.env` file:

```bash title=".env"
CLERK_PUBLISHABLE_KEY="..."
Expand All @@ -41,7 +50,9 @@ Lastly, in your project's `redwood.toml` file, include `CLERK_PUBLISHABLE_KEY` i
```toml title="redwood.toml"
[web]
# ...
includeEnvironmentVariables = ["CLERK_PUBLISHABLE_KEY"]
includeEnvironmentVariables = [
"CLERK_PUBLISHABLE_KEY",
]
```

That should be enough; now, things should just work.
Expand Down Expand Up @@ -71,19 +82,40 @@ Clicking sign up should open a sign-up box:

After you sign up, you should see `{"isAuthenticated":true}` on the page.

## Deep dive: the `ClerkStatusUpdater` component
## Customizing the session token

There's not a lot to the default session token.
Besides the standard claims, the only thing it really has is the user's `id`.
Eventually, you'll want to customize it so that you can get back more information from Clerk.
You can do so by navigating to the "Sessions" section in the nav on the left, then clicking on "Edit" in the "Customize session token" box:

At the start of this doc, we said that there's one Clerk-specific thing worth noting.
We'll discuss it here, but feel free to skip this section if you'd like—this is all extracurricular.
![clerk_customize_session_token](https://github.com/redwoodjs/redwood/assets/32992335/6d30c616-b4d2-4b44-971b-8addf3b79e5a)

Clerk is a bit unlike the other auth providers Redwood integrates with in that it puts an instance of its client SDK on the browser's `window` object.
That means we have to wait for it to be ready.
With other providers, we instantiate their client SDK in `web/src/auth.ts`, then pass it to `createAuth`.
Not so with Clerk—instead we use special Clerk components and hooks, like `ClerkLoaded` and `useUser`, to update Redwood's auth context with the client when it's ready.
As long as you're using the `clerkJwtDecoder`
all the properties you add will be available to the `getCurrentUser` function:

```ts title="api/src/lib/auth.ts"
export const getCurrentUser = async (
decoded, // 👈 All the claims you add will be available on the `decoded` object
// ...
) => {
decoded.myClaim...

// ...
}
````

## Avoiding feature duplication

Redwood's Clerk integration is based on [Clerk's React SDK](https://clerk.dev/docs/reference/clerk-react/installation).
This means that there's some duplication between the features in the SDK and the ones in `@redwoodjs/auth-clerk-web`.
For example, the SDK ha a `SignedOut` component that redirects a user away from a private pagevery much like wrapping a route with Redwood's `Private` component.
We recommend you use Redwood's way of doing things as much as possible since it's much more likely to get along with the rest of the framework.

## Deep dive: the `ClerkStatusUpdater` component

With Clerk, there's a bit more going on in the `web/src/auth.tsx` file than other auth providers.
This is because Clerk is a bit unlike the other auth providers Redwood integrates with in that it puts an instance of its client SDK on the browser's `window` object.
That means Redwood has to wait for it to be ready.
With other providers, Redwood instantiates their client SDK in `web/src/auth.ts{x}`, then passes it to `createAuth`.
With Clerk, instead Redwood uses Clerk components and hooks, like `ClerkLoaded` and `useUser`, to update Redwood's auth context with the client when it's ready.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,7 @@ You can pass any flags to the command and use them within your script:
See [this how to](how-to/background-worker.md) for an example of using exec to run a background worker.
## experimental
## experimental (alias exp)
Set up and run experimental features.
Expand All @@ -414,11 +414,6 @@ For more information, including details about specific features, see this Redwoo
**Available Experimental Features**
View all that can be _set up_:
```
yarn redwood experimental setup --help
```
View all that can be _run_:
```
yarn redwood experimental --help
```
Expand Down Expand Up @@ -1462,7 +1457,7 @@ yarn redwood lint
## prisma
Run Prisma CLI with experimental features.
Run Prisma CLI within the context of a Redwood project.
```
yarn redwood prisma
Expand All @@ -1474,7 +1469,7 @@ Redwood's `prisma` command is a lightweight wrapper around the Prisma CLI. It's
>
> By lightweight wrapper, we mean that we're handling some flags under the hood for you.
> You can use the Prisma CLI directly (`yarn prisma`), but letting Redwood act as a proxy (`yarn redwood prisma`) saves you a lot of keystrokes.
> For example, Redwood adds the `--preview-feature` and `--schema=api/db/schema.prisma` flags automatically.
> For example, Redwood adds the `--schema=api/db/schema.prisma` flags automatically.
>
> If you want to know exactly what `yarn redwood prisma <command>` runs, which flags it's passing, etc., it's right at the top:
>
Expand Down Expand Up @@ -1759,6 +1754,8 @@ A `generateGraphiQLHeader` file will be created in your `api/lib` folder and inc
yarn redwood setup graphiql <provider>
```
If you're using `dbAuth`, make sure the `-i` id you provided is not logged in from the web app.
| Arguments & Options | Description |
| :------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `provider` | Auth provider to configure. Choices are `dbAuth`, `netlify`, and `supabase` |
Expand Down Expand Up @@ -1860,7 +1857,7 @@ yarn redwood setup deploy <provider>
| Arguments & Options | Description |
| :------------------ | :---------------------------------------------------------------------------------------------------- |
| `provider` | Deploy provider to configure. Choices are `aws-serverless`, `netlify`, `render`, or `vercel` |
| `provider` | Deploy provider to configure. Choices are `baremetal`, `coherence`, `edgio`, `flightcontrol`, `netlify`, `render`, `vercel`, or `aws-serverless [deprecated]`, |
| `--database, -d` | Database deployment for Render only [choices: "none", "postgresql", "sqlite"] [default: "postgresql"] |
| `--force, -f` | Overwrite existing configuration [default: false] |
Expand Down Expand Up @@ -1914,15 +1911,15 @@ yarn redwood setup tsconfig
### setup ui
Set up a UI design or style library. Right now the choices are [TailwindCSS](https://tailwindcss.com/), [Chakra UI](https://chakra-ui.com/), [Mantine UI](https://ui.mantine.dev/) and [WindiCSS](https://windicss.org/).
Set up a UI design or style library. Right now the choices are [TailwindCSS](https://tailwindcss.com/), [Chakra UI](https://chakra-ui.com/), [Mantine UI](https://ui.mantine.dev/) and [deprecated] [WindiCSS](https://windicss.org/).
```
yarn rw setup ui <library>
```
| Arguments & Options | Description |
| :------------------ | :-------------------------------------------------------------------------------------- |
| `library` | Library to configure. Choices are `chakra-ui`, `tailwindcss`, `mantine`, and `windicss` |
| `library` | Library to configure. Choices are `chakra-ui`, `tailwindcss`, `mantine`, and `windicss [deprecated]` |
| `--force, -f` | Overwrite existing configuration |
## storybook
Expand Down
File renamed without changes.
40 changes: 40 additions & 0 deletions docs/versioned_docs/version-5.x/deploy/coherence.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
description: Serverful deploys on GCP or AWS via Coherence's full-lifecycle environment automation
---

# Deploy to Coherence

[Coherence](https://www.withcoherence.com/) delivers automated environments across the full software development lifecycle, without requiring you to glue together your own mess of open source tools to get a world-class develper experience for your team. Coherence is focused on serving startups, who are doing mission-critical work. With one simple configuration, Coherence offers:

- Cloud-hosted development environments, based on VSCode. Similar to Gitpod or GitHub CodeSpaces
- Production-ready CI/CD running in your own GCP/AWS account, including: database migration/seeding/snapshot loading, parallelized tests, container building and docker registry management
- Full-stack branch previews. Vercel/Netlify-like developer experience for arbitrary container apps, including dependencies such as CDN, redis, and database resources
- Staging and production environment management in your AWS/GCP accounts. Production runs in its own cloud account (AWS) or project (GCP). Integrated secrets management across all environment types with a developer-friendly UI

## Coherence Prerequisites

To deploy to Coherence, your Redwood project needs to be hosted on GitHub and you must have an [AWS](https://docs.withcoherence.com/docs/overview/aws-deep-dive) or [GCP](https://docs.withcoherence.com/docs/overview/gcp-deep-dive) account.

## Coherence Deploy

:::caution Prerender doesn't work with Coherence yet

You can see its current status and follow updates here on GitHub: https://github.com/redwoodjs/redwood/issues/8333.

But if you don't use prerender, carry on!

:::

If you want to deploy your Redwood project on Coherence, run the setup command:

```
yarn rw setup deploy coherence
```

The command will inspect your Prisma config to determine if you're using a supported database (at the moment, only `postgres` or `mysql` are supported on Coherence).

Then follow the [Coherence Redwood deploy docs](https://docs.withcoherence.com/docs/configuration/frameworks#redwood-js) for more information, including if you want to set up:
- a redis server
- database migration/seeding/snapshot loading
- cron jobs or async workers
- object storage using Google Cloud Storage or AWS's S3
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ Redwood is designed for both serverless and traditional infrastructure deploymen

Currently, these are the officially supported deploy targets:
- Baremetal (physical server that you have SSH access to)
- [Coherence](https://www.withcoherence.com/)
- [Flightcontrol.dev](https://www.flightcontrol.dev?ref=redwood)
- [Edg.io](https://edg.io)
- [Netlify.com](https://www.netlify.com/)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ All of Redwood's form helpers need the `register` function to do what they do. B

### Using `formMethods`

There's some functions that `useForm` returns that it'd be nice to have access to.
There are some functions that `useForm` returns that it'd be nice to have access to.
For example, `useForm` returns a function `reset`, which resets the form's fields.
To access it, you have to call `useForm` yourself.
But you still need to pass `useForm`'s return to the `<FormProvider>` so that Redwood's helpers can register themselves:
Expand Down
File renamed without changes.
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ export const schema = gql`
deleteUser(id: Int!): User! @requireAuth
generateToken(email: String!): userTokenResponse! @skipAuth
}
`
```

### 4. Modify the auth function

Expand Down Expand Up @@ -620,7 +620,7 @@ You should see the changes and it should look like this!
![image](https://user-images.githubusercontent.com/638764/220204883-800829ab-e037-41e1-a2da-d47923c4d20c.png)
### 7. Updating the routes
### 9. Updating the routes
The last thing we need to to do is update the routes to use the new page.
```jsx title="/web/src/Routes.js"
Expand Down
Loading

0 comments on commit 43bbc27

Please sign in to comment.