Authentication

0:00/0:00

You are building a simple task manager in DYPAI. 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 DYPAI.

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 DYPAI 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, DYPAI 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 DYPAI: login, register, forgot password, change password. You do not need to be a DYPAI specialist—the agent can lean on documentation and MCP tools.

Dependencies
Ask the agent to check that the DYPAI 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 DYPAI 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 DYPAI project lives on the internet—same idea as in the first tutorial (setup / connection). In Next.js, copy the public project URL from the DYPAI 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. DYPAI 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 DYPAI tools from your IDE
Having the agent scaffold auth pages wired to DYPAI 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 DYPAI 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.