Gel Next.js Auth Template

Welcome to the Gel Next.js Starter. This starter is designed to help you get up and running with Gel and Next.js quickly. It includes a basic setup for authentication, Gel schema, and a UI to get you started. Below are some next steps to help you get up to speed.

Next Steps

  • Finish setting up Email + Password configuration

    We've set up the Email + Password provider for you, however in order to really use an email-based factor, you will need to set up SMTP to enable sending outgoing emails. Open the Gel UI with the npx gel ui command or through the Gel Cloud Console and navigate to the Auth tab. Go to the "SMTP" section and add your SMTP credentials. We recommend using a service like Mailtrap for testing, and a service like Resend for production.

  • Sign up to the platform

    Click the sign up button in the top right corner to create an account. We're using the built-in authentication for this starter but you can implement a custom UI later.Sign up

  • Extend the Gel schema

    Open the schema/default.gel file and add your own types and fields. You can start by adding a Post type with a title and content field or changing the Item type to include more fields. For example:
    type Item {
  # ...

  # Add your new fields here:
  required title: str;
  required content: str;
}

  • Edit the Gel query

    Open the app/dashboard/page.tsx file and update the query to include your new fields. You can add a new field to the query or change the existing fields to include your new data.
    const itemsQuery = e.select(e.Item, (_item) => ({
  id: true,
  name: true,
  created: true,
  updated: true,
  created_by: {
    name: true,
  },
  // Add your new fields here
}))

  • Add more Auth providers

    Open the Gel UI with the npx gel ui command and navigate to the Auth tab. Go to the "Providers" section and add a new Auth provider by clicking the "Add Provider" button and following the instructions.Auth providers

  • Test the reset password flow

    Sign out of your account and try to reset your password. Click the "Forgot Password" link on the login page and follow the instructions to reset your password. You should receive an email with a link to reset your password. To test it locally, you can use the Mailpit tool. You can find setup instructions in the README.md file.Reset password

  • Extend the "New Item" form

    Open the components/AddItem.tsx file and update the form to include your new fields. You can add a new field to the form or change the existing fields to include your new data.
    Add item form

  • Test access policies

    Try deleting an item that you don't own. You shouldn't be able to delete it. You can test this by creating a new item and then trying to delete it with a different account. As a next step you can conditionally render the delete button based on the user's permissions.Delete item

  • Modify the Gel Auth UI callback

    Open the app/auth.tsx file and update the callback to include your new fields. You can add a new field to the callback or change the existing fields to include your new data.

  • Deploy your app

    Once you're happy with your changes, you can deploy your app to the Gel Cloud and Vercel. Follow the deployment instructions in the Gel documentation.