https://www.ory.sh/ logo
Join Slack
Powered by
Hello, I am trying to set up email verification us...
# talk-kratos
i
Hello, I am trying to set up email verification using the code method. A user will enter their email and request a verification email, by calling 
/self-service/verification/browser
. Then, the user will get an email and with a link. This link looks like this 
<http://localhost:4433/self-service/verification?code=779655&flow=6c502039-27a6-4f09-b20d-445c10757962>
. When a user clicks this link, the user is redirected to my custom UI, 
<http://localhost:5173/verification/confirm?flow=6c502039-27a6-4f09-b20d-445c10757962>
. At this point, I only have the flow id. How can I find the original CSRF cookie that was used to initiate this flow when I first called 
/self-service/verification/browser
? I need the original CSRF cookie because: 1. I need to make a GET request to 
<http://localhost:4433/self-service/verification/flows?id=${flowId}>
to retrieve the code for the verification and this requires a CSRF cookie. I understand it is also in the email but this way I can automatically populate the code text field. 2. I need to make a POST request to 
<http://localhost:4433/self-service/verification/flows?id=${flowId}>
to submit the code and verify the user email address. Thanks!
p
Hi @incalculable-shoe-63378, You can use 
credentials: include
when making the call with 
fetch
to Ory. This will include all cookies scoped to this domain to Ory.
l
Hi, @proud-plumber-24205 I have a question on this exact topic. After the UI redirect, the code query param is not included in the link. Why not and can I include it? I actually need it there.
p
At which point in the flow are you talking about?
l
A user receives an email with a link:
Copy code
<https://mydomain.dev/kratos/self-service/verification?code=065133&flow=f205b76b-18e8-4014-97cf-45910eef185c>
When the user clicks the link, they get a response 303 and are redirected to the UI URL from the kratos-config, The flow query param stays in place after the redirect to the UI, but the code query param disappears. The user is redirected to:
Copy code
<https://mydomain.ui.dev/kratos/self-service/verification?flow=f205b76b-18e8-4014-97cf-45910eef185c>
I really wish I could preserve the code query param
p
why do you need the code in the query parameter? Just fetch the flow data using the flow id and it will be in the json response
l
Wait. The code itself will be in the response? Okay, I will try
i
@proud-plumber-24205 Thank you for your responses. You are correct. The CSRF and session cookies will be automatically sent with 
credentials: 'include'
. To access them you can use the following:
Copy code
javascript:

export async function GET(request) {
    try {
        const allCookies = request.cookies.getAll();
        const cookieString = allCookies.map(cookie => `${cookie.name}=${cookie.value}`).join('; ');
        const flowId = request.url.searchParams.get('flowId');
        const response = await fetch(`<http://localhost:4433/self-service/verification/flows?id=${flowId}>`, {
            headers: {
                'Cookie': cookieString
            }
        });
    } catch (error) {
        console.error('Error occurred:', error);
        return new Response(`Internal Server Error: ${error}`, { status: 500 });
    }
}
I just have one more question. This is the name of my CSRF cookie: 
csrf_token_csrf_token_82b119fa58a0a1cb6faa9738c1d0dbbf04fcc89a657b7beb31fcde400ced48ab
. How was this generated and how can I get this value?
p
you don't need this value, just have the 
credentials: "include"
on client-side web applications and it will be included in the request. For the second csrf token you need to get it from the response body of the flow. https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#csrf-errors
i
@proud-plumber-24205 Thanks for your response. From my understanding, the link you linked me to is regarding the 
csrf_token
but not the 
csrf_cookie
. If I understand correctly, the 
csrf_cookie
is a cookie that is set in the browsers cookie storage automatically when we make a call that initialises a flow of some kind to the Ory Kratos server. In order to make subsequent calls for the flow, we need to provide the 
csrf_cookie
in the cookies value for all calls going forward that are related to the same flow id. Right now, I have it hardcoded to look for a cookie with this name: 
csrf_token_csrf_token_82b119fa58a0a1cb6faa9738c1d0dbbf04fcc89a657b7beb31fcde400ced48ab
. I do not think hard coding to look for this name is the proper way. • How is this name generated? Is it dynamic or is it always going to be this exact name? • What is the proper procedure to find this cookie? What if there are other 
csrf_token_csrf_token_...
cookies in my browser storage? Example: When a user clicks the link in the email for email verification, the user is redirected to my custom UI. At this point, we do not have access to any of the HTTP calls from before (do we?). Therefore, I do not have access to the cookies that were used in the calls before. I need to look into the browser storage to find the cookies.
p
when the user clicks the link, they are automatically given a cookie inside their browser. This cookie is httpOnly which means that you cannot access it from JS. As mentioned before here, if you are using 
fetch
just add the 
credentials: include
property and the cookies will be automatically included in the request. With axios you can do the same 
axios.get(<a url>, { withCredentials: true });
i
Yes you are correct. Thank you!
29 Views
Open in Slack
PreviousNext
Powered by