<@U04UQ68083H> I have my own nextjs page
```"use c...
# ory-copilotw
wooden-addition-60810
09/17/2025, 8:48 PM@chilly-king-10285 I have my own nextjs page
Copy code
"use client";
import React, { useState, FormEvent } from "react";
import { useSearchParams } from "next/navigation";
import { Button } from "@workspace/ui/components/button";
import { Input } from "@workspace/ui/components/input";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@workspace/ui/components/card";
import { Alert, AlertDescription } from "@workspace/ui/components/alert";
import { Label } from "@workspace/ui/components/label";
import { Loader2, Lock } from "lucide-react";
interface LoginFormData {
email: string;
password: string;
}
export default function LoginForm() {
const [loading, setLoading] = useState<boolean>(false);
const [error, setError] = useState<string>("");
const searchParams = useSearchParams();
const clientId = searchParams.get("client_id");
const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
setLoading(true);
setError("");
const formData = new FormData(e.currentTarget);
const email = formData.get("email") as string;
const password = formData.get("password") as string;
// You can now use email and password variables
console.log("Email:", email);
console.log("Password:", password);
};
// If no session, show login form
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-4">
<Card className="w-full max-w-md">
<CardHeader className="space-y-1 text-center">
<div className="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-primary/10 mb-4">
<Lock className="h-6 w-6 text-primary" />
</div>
<CardTitle className="text-2xl font-bold">Welcome back</CardTitle>
<CardDescription>
{clientId ? (
<>
App <span className="font-medium">{clientId}</span> is
requesting access to your account
</>
) : (
"Sign in to your account to continue"
)}
</CardDescription>
</CardHeader>
<CardContent>
{error && (
<Alert variant="destructive" className="mb-6">
<AlertDescription>{error}</AlertDescription>
</Alert>
)}
<form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input
name="email"
type="email"
placeholder="Enter your email"
required
disabled={loading}
/>
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input
name="password"
type="password"
placeholder="Enter your password"
required
disabled={loading}
/>
</div>
<Button type="submit" className="w-full" disabled={loading}>
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
Sign in
</Button>
</form>
<div className="mt-6 text-center space-y-2">
<p className="text-sm text-muted-foreground">
Don't have an account?{" "}
<a
href="/register"
className="font-medium text-primary hover:underline"
>
Sign up
</a>
</p>
<p className="text-xs text-muted-foreground">
<a href="/forgot-password" className="hover:underline">
Forgot your password?
</a>
</p>
</div>
</CardContent>
</Card>
</div>
);
}c
chilly-king-10285
09/17/2025, 8:48 PMA message from kapa.ai
chilly-king-10285
09/17/2025, 8:49 PMTo integrate your custom Next.js login form with Ory Kratos, you need to use the Ory self-service login flow APIs. The process involves: 1. Initializing the Login Flow: When the user visits your login page, you must create or fetch a login flow from Kratos. 2. Rendering the Form: Use the flow data from Kratos to render the form fields (including hidden fields like CSRF tokens). 3. Submitting the Login Flow: On form submission, send the form data (including the flow ID and CSRF token) to the Kratos login endpoint. Below is a step-by-step guide, with code examples adapted for Next.js and React, based on the official Ory documentation. --- ### 1. Initialize the Login Flow When your login page loads, check for a
flow Copy code
js import { useEffect, useState } from "react"; import { useRouter, useSearchParams } from "next/navigation"; import { FrontendApi, Configuration, LoginFlow } from "@ory/client"; const frontend = new FrontendApi( new Configuration({ basePath: "https://<your-project-slug>.<http://projects.oryapis.com|projects.oryapis.com>", baseOptions: { withCredentials: true }, }) ); export default function LoginForm() { const [flow, setFlow] = useState<LoginFlow>(); const router = useRouter(); const searchParams = useSearchParams(); const flowId = searchParams.get("flow"); useEffect(() => { if (!flowId) { // No flow ID, redirect to Kratos to create a new flow router.replace( `/login?flow=${/* fetch new flow id from Kratos or redirect to Kratos endpoint */}` ); return; } // Fetch the flow data frontend .getLoginFlow({ id: flowId }) .then(({ data }) => setFlow(data)) .catch(() => { // handle error, possibly redirect to create a new flow }); }, [flowId]); // ... }flow.ui.nodes Copy code
js <form action={flow.ui.action} method={flow.ui.method} onSubmit={handleSubmit} > {flow.ui.nodes.map((node, idx) => { if (node.attributes.type === "hidden") { return ( <input key={idx} type="hidden" name={node.attributes.name} value={node.attributes.value} /> ); } // Map other input types (email, password, etc.) to your custom Input component // ... })} <Button type="submit" disabled={loading}> {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Sign in </Button> </form>flow.ui.action Copy code
js const handleSubmit = async (e) => { e.preventDefault(); setLoading(true); setError(""); const formData = new FormData(e.currentTarget); const body = Object.fromEntries(formData); try { await frontend.updateLoginFlow({ flow: flow.id, updateLoginFlowBody: body, }); // On success, redirect to your app's home or dashboard router.replace("/"); } catch (err) { // Handle errors, e.g., show error messages setError("Login failed"); setLoading(false); } };flow.ui.nodesflow.ui.action@ory/clientw
wooden-addition-60810
09/17/2025, 9:08 PM@chilly-king-10285 Make sure on the login page if there isn't a flow, you need to get a flow.
c
chilly-king-10285
09/17/2025, 9:08 PMA message from kapa.ai
chilly-king-10285
09/17/2025, 9:08 PMTo ensure your login page always has a flow, you need to check for the presence of a
flowflowflow/self-service/login/browserflow Copy code
js import { useEffect } from "react"; import { useRouter, useSearchParams } from "next/navigation"; export default function LoginForm() { const router = useRouter(); const searchParams = useSearchParams(); const flow = searchParams.get("flow"); useEffect(() => { if (!flow) { // Redirect to Kratos to initialize a new login flow window.location.href = `https://<your-kratos-url>/self-service/login/browser?return_to=${encodeURIComponent(window.location.href)}`; } }, [flow]); // ...rest of your component }<your-kratos-url>return_toflowfloww
wooden-addition-60810
09/17/2025, 9:11 PM@chilly-king-10285 Access to XMLHttpRequest at 'https://kratos.eagle-rfid.com/self-service/login/browser' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
c
chilly-king-10285
09/17/2025, 9:11 PMA message from kapa.ai
chilly-king-10285
09/17/2025, 9:11 PMThe error you are seeing: > Access to XMLHttpRequest at 'https://kratos.eagle-rfid.com/self-service/login/browser' from origin 'http://localhost:3000' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. means that your browser is blocking the request because the CORS configuration on your Ory Kratos instance is not allowing requests from
<http://localhost:3000>*nulllocalhost/127.0.0.1localhost127.0.0.1localhost:4000 Copy code
bash ory tunnel --project <your-project-id-or-slug> <http://localhost:3000><http://localhost:4000>localhostw
wooden-addition-60810
09/17/2025, 9:13 PM@chilly-king-10285 This is a local instance with self hosted kratos, how do I work on my development server without localhost?
c
chilly-king-10285
09/17/2025, 9:13 PMA message from kapa.ai
chilly-king-10285
09/17/2025, 9:14 PMIf you are running a self-hosted Ory Kratos instance for local development, you do not need to avoid using `localhost`—in fact, you should use either
localhost127.0.0.1localhost127.0.0.1localhost127.0.0.1kratos.yml<http://localhost:3000> Copy code
yaml serve: public: cors: enabled: true allowed_origins: - <http://localhost:3000> allowed_methods: - POST - GET - PUT - PATCH - DELETE allowed_headers: - Authorization - Cookie - Content-Type exposed_headers: - Content-Type - Set-Cookie--devSameSiteSecure Copy code
bash kratos serve --dev--dev<http://localhost:3000><http://localhost:4433>localhost127.0.0.1<http://localhost:3000>localhost127.0.0.1SameSiteSecure--devlocalhostw
wooden-addition-60810
09/17/2025, 9:15 PM@chilly-king-10285 My kratos instance is running at kratos.eagle-rfid.com and I need to develop with my localhost server
c
chilly-king-10285
09/17/2025, 9:15 PMA message from kapa.ai
chilly-king-10285
09/17/2025, 9:15 PMIf your self-hosted Kratos instance is running at
<http://kratos.eagle-rfid.com><http://localhost:3000>localhostlocalhost<https://kratos-my-website/><https://secureapp-my-website/>localhostlocalhost<http://eagle-rfid.com|eagle-rfid.com><http://app.eagle-rfid.com|app.eagle-rfid.com>.<http://eagle-rfid.com|eagle-rfid.com>localhostlocalhost<http://kratos.eagle-rfid.com|kratos.eagle-rfid.com>3 Views