Thank you for this @devchampian I'm looping in @dthyresson to help get this to the finish line (DT, please pass along if/as needed).

Question on my end:

1. Is the Redwood Clerk Auth currently working as is? (I haven't tested in awhile.)
2. For existing projects using Clerk, what instructions do we need to include in the Release Notes for upgrading to these templates?
3. How to test/confirm the code in this PR is working: steps to use locally, external example project, ... ?
4. Are the Redwood Clerk Docs in need of any related TLC?

1. Is the Redwood Clerk Auth currently working as is? (I haven't tested in awhile.)

Yes, it is. The only exception is the small fix included in this PR around the CLI auth setup script replacing the Redwood <AuthProvider> with <AuthProvider type="clerk">

2. For existing projects using Clerk, what instructions do we need to include in the Release Notes for upgrading to these templates?

The previous implementation is still supported by Clerk. The change to use the withClerk HOC was to remove the need for the <ClerkLoaded> component. The other changes were to remove unnecessary code. The auth template is a copy of the standard one so there is nothing Clerk-specific in there.

3. How to test/confirm the code in this PR is working: steps to use locally, external example project, ... ?

So I did confirm it was working locally by following your contributing documentation on testing the CLI. If you pull down this branch, run yarn build and then yarn dev setup auth clerk --force into a Redwood project directory.

Caveat: I wasn't able to get the --cwd flag to work correctly so I did need to set the RWJS_CWD environment variable explicitly as well as add the cwd property to the execa('yarn', []) calls in packages/cli/src/commands/setup/auth/auth.js to point to a separate Redwood project directory.

4. Are the Redwood Clerk Docs in need of any related TLC?

The only change needed in the docs would be to update web/src/App.js to match the version in this PR.

We are likely going to be making a more substantial change to the Clerk integration with our Auth v2 update in the future. I think at that point, we can also revisit the docs to make sure everything is up-to-date with all the latest goodness.

Thank you @thedavidprice for taking a look at this!

I also just posted this tutorial based on the official Redwood one, but adding Clerk auth. The corresponding codebase is here if you want to validate the changes with a sample application.

I also just posted this tutorial based on the official Redwood one, but adding Clerk auth. The corresponding codebase is here if you want to validate the changes with a sample application.

This is excellent! Reading now. Thank you!

Thank you for answering my questions @devchampian

Yes, it is. The only exception is the small fix included in this PR around the CLI auth setup script replacing the Redwood with

^^ this feels like the most important callout to make in the Release Notes

@dthyresson once reviewed and approved, can you help me stay on top of ToDos related to copy and docs?

Testing in GitPod now.

Todo:

The only change needed in the docs would be to update web/src/App.js to match the version in this PR.

Nice!

@devchampian Any chance when all integrated RedwoodJS could get a shout out here, too?

Working in GitPod with test project.

For the docs - having a note about approving cookies for dev may be nice so that it isn'y an unexpected decisions.

But looks great!

Also, I wish (and maybe will add in future) that setup created a component for the Clerk UserButton to make sign up even easier:

<li className={isAuthenticated ? 'ml-2' : null}>
              {isAuthenticated ? (
                <UserButton afterSignOutAll={window.location.href} />
              ) : (
                <SignInButton mode="modal">
                  <button className="py-2 px-4 hover:bg-blue-600 transition duration-100 rounded">
                    Log in
                  </button>
                </SignInButton>
              )}
            </li>
          </ul>
          {isAuthenticated && (
            <div className="text-right text-xs text-blue-300">
              {currentUser?.emailAddresses[0]?.emailAddress}
            </div>
          )}

And setup to somehow inject ClerkAuthProvider:

const App = () => (
  <FatalErrorBoundary page={FatalErrorPage}>
    <RedwoodProvider titleTemplate="%PageTitle | %AppTitle">
      <ClerkAuthProvider>
        <AuthProvider type="clerk">
          <RedwoodApolloProvider>
            <Routes />
          </RedwoodApolloProvider>
        </AuthProvider>
        </ClerkAuthProvider>
    </RedwoodProvider>
  </FatalErrorBoundary>
)

within RedwoodProvider.

That would make setup rather slick.

@dthyresson Awesome, thank you! And absolutely we can add a RedwoodJS shoutout. 😄

This was just a minor update, but as previously discussed, we would like to upgrade the integration to our Auth v2 so I think at that time we can also do a docs refresh.

I know Redwood has authentication built-in with dbAuth but it's great that it offers the flexibility to swap different providers for those folks who don't want to manage it themselves.

Completely agree with you about the yarn rw auth setup clerk command. Wish it could fill in more of the boilerplate. Is that something others have asked for?

For types, it might be this:

export declare const AuthContext: React.Context<AuthContextInterface>;
declare type AuthProviderProps = {
    client: SupportedAuthClients;
    type: Omit<SupportedAuthTypes, 'dbAuth'>;
    skipFetchCurrentUser?: boolean;
} | {
    client?: never;
    type: 'dbAuth';
    skipFetchCurrentUser?: boolean;
};

Where type needs to include clerk, too?

Edit: No, sorry. That's already in

export declare type SupportedAuthClients = Auth0 | AzureActiveDirectory | DbAuth | GoTrue | NetlifyIdentity | MagicLink | FirebaseClient | Supabase | Clerk | Ethereum | Nhost | SuperTokens | Custom;
export declare type SupportedAuthTypes = keyof typeof typesToClients;

Ok will have to look more closely.

Wish it could fill in more of the boilerplate. Is that something others have asked for?

Not yet, but I know in v2 Redwood would like to make the setups more sophisticated and customizable, so for v1 I think the guides and tutorials work (but improve soon).

Honestly, I got the test project up and running in 2-3 minutes really.

we would like to upgrade the integration to our Auth v2 so I think at that time we can also do a docs refresh.

Do you think that would be possible in the next 3-4 weeks?

Edit: See #4459 (comment) for an update.

Note adding

declare type AuthProviderProps = {
    client: SupportedAuthClients;
    type: Omit<SupportedAuthTypes, 'dbAuth'>;
    skipFetchCurrentUser?: boolean;
} | {
    client?: never;
    type: 'dbAuth' | 'clerk'; <<<----
    skipFetchCurrentUser?: boolean;
}

'clerk' to the type here appears to resolve one issue.

I think that casting as React.ReactElement resolves the final TS warning.

const ClerkAuthConsumer = withClerk(({ children, clerk }) => {
  return React.cloneElement(children as React.ReactElement<any>, { client: clerk })
})

Looks good.

Merging. Thanks all!

Thanks, all!

@dthyresson @devchampian Could either of you help to make sure the Redwood Auth Doc is updated to match this PR? See:

• Update Clerk auth provider logic #4443 (comment)

Just one comment that it should be <ClerkAuthProvider> not <ClerkProvider> wrapped around the Redwood <AuthProvider> in this code snippet.

@devchampian Is that note for the Docs? I.e. this:

• https://github.com/redwoodjs/redwoodjs.com/blob/main/docs/authentication.md

Just one comment that it should be <ClerkAuthProvider> not <ClerkProvider> wrapped around the Redwood <AuthProvider> in this code snippet.

Oops. that was me just testing for types in my last GitPod deploy. I never launched the app. But I had it correct before :)

@thedavidprice Actually for the context of wherever @dthyresson took that screenshot. But yes, the docs can be updated there as well.

@dthyresson Since I don't have context, could you help here with the final two things:

1. update the Doc to match
2. is there codemod or fix instructions I should include in the Release Notes? Assuming "yes".

@dthyresson Since I don't have context, could you help here with the final two things:

1. update the Doc to match
2. is there codemod or fix instructions I should include in the Release Notes? Assuming "yes".

@thedavidprice

• I have a PR for the docs updates here: https://github.com/redwoodjs/redwoodjs.com/pull/974
• I think that the instructions to upgrade would be to simply update your web/src/App.js|ts to match what is in https://github.com/clerkinc/redwood-tutorial-with-clerk/blob/main/web/src/App.js

Except for TS, then need a slight change to:

const ClerkAuthConsumer = withClerk(({ children, clerk }) => {
  return React.cloneElement(children as React.ReactElement<any>, { client: clerk })
})

Just updated the RW Auth Playground to have Clerk as well.

It's running a canary build of 0.46. Once 0.46.1 is released, will update and deploy.