Authentication

0:00/0:00

You are building a simple task manager in HeroMate. Over the course you will add authentication, tables and endpoints, storage, an AI assistant, and later payments. This video starts with authentication—but first you must connect your project to HeroMate.

What this video covers

IDE and project
Use any of the supported AI clients—Claude Code, Codex, Cursor, Windsurf, or Antigravity (or any MCP-compatible tool). The example uses an empty Next.js app (a single demo page) so you can follow along even if you “know nothing” about HeroMate yet.

Connect MCP
Open the org "Conectar IA" (MCP tokens) page at /{org}/mcp/tokens, create a token, and add the MCP config to your AI client (the exact menu depends on the client). Once connected, HeroMate tools should appear for your project.

Choose a model
The tutorial uses a fast model (Composer 2 in the video), but you can use Claude, Gemini, GPT, or whatever you prefer.

Ask the AI to build auth
Prompt your agent to build full authentication for the app using HeroMate: login, register, forgot password, change password. You do not need to be a HeroMate specialist—the agent can lean on documentation and MCP tools.

Dependencies
Ask the agent to check that the HeroMate client SDK and related packages are installed. If something is missing, have it install what the docs require so you are not doing it by hand.

Implementation
The agent will call HeroMate tools, read docs, and gradually create the frontend pages. Wait until the run finishes.

Environment URL
You still need to tell the frontend where your HeroMate project lives on the internet—same idea as in the first tutorial (setup / connection). In Next.js, copy the public project URL from the HeroMate dashboard (the snippet shown for your stack), put it in .env.local (for example NEXT_PUBLIC_DYPAI_URL=...), then restart the dev server so environment variables reload.

Test the flow
Open your app: register with name, email, and password. HeroMate sends a verification email—open it, confirm, and you should be redirected back into the app. Then sign in and confirm the session works. From there you can sign out and verify again.

The Authentication area
Once auth is wired, the Authentication section (Build → Authentication) is where you manage it. It has these sub-sections:

Users — your registered users.
Roles — role definitions used for access control.
Providers — social/OAuth sign-in (enable a provider here before using signInWithOAuth).
Mail — email templates and the sender for verification/reset emails.
SMS — the SMS OTP provider (configure this before using phone sign-in).
Settings — general auth settings.

For server-side auth inside an endpoint, there's also a dypai_auth workflow node.

What you'll learn

Connecting MCP and using HeroMate tools from your IDE
Having the agent scaffold auth pages wired to HeroMate Auth
Installing and configuring the client SDK via prompts
Setting .env.local with your project URL and restarting the app
Email verification and a working login / logout loop

Continue with Tables & endpoints to design tasks, APIs, and the rest of the app—then storage, AI agent, and payments (for example Stripe for a Premium or Pro plan).

What this video covers

Choose a model
The tutorial uses a fast model (Composer 2 in the video), but you can use Claude, Gemini, GPT, or whatever you prefer.

Implementation
The agent will call HeroMate tools, read docs, and gradually create the frontend pages. Wait until the run finishes.

The Authentication area
Once auth is wired, the Authentication section (Build → Authentication) is where you manage it. It has these sub-sections:

Users — your registered users.

Roles — role definitions used for access control.

Providers — social/OAuth sign-in (enable a provider here before using signInWithOAuth).

Mail — email templates and the sender for verification/reset emails.

SMS — the SMS OTP provider (configure this before using phone sign-in).

Settings — general auth settings.

For server-side auth inside an endpoint, there's also a dypai_auth workflow node.