User Management

This will create the users Object type in your Bucket.

This will add the components SignUpClient.tsx, LoginClient.tsx, ForgotPasswordForm.tsx, etc. and actions.ts server actions file to your blocks folder located in cosmic/blocks/user-management.

We will use the Resend email service to send emails (installed automatically). Learn more about sending emails with Resend on the Resend website. Add the following keys to the `.env.local` file. Change the values to your Resend key and app details. Find your Resend API key in the Resend dashboard.

Add the AuthProvider component to your layout.tsx file. This will provide the auth context to your app.

Create a new file at app/signup/page.tsx and add the following code. Then go to http://localhost:3000/signup to see the form.

Create a new file at app/verify/page.tsx and add the following code.

Create a new file at app/login/page.tsx and add the following code.

Create a new file at app/forgot-password/page.tsx and add the following code.

Create a new file at app/reset-password/page.tsx and add the following code.

Create a new file at app/dashboard/page.tsx and add the following code. This uses the auth context to check if the user is logged in and fetches the user data from Cosmic. Note: You will need to add imgix.cosmicjs.com to the images section of your next.config.ts file to enable the avatar image. For larger images, you will need to enable larger body sizes for server actions. See the Next.js docs for more details.

Add the AuthButtons component to your navigation menu. This will show the login/logout buttons and user dashboard menu items.

Check out a full-featured working example Cosmic Podcast Network.