To integrate Ory social sign-in in a Next.js application, you need to follow several steps. Here's a general outline based on the provided knowledge sources: 1. Install Ory's SDK and Integration Tools: You need to install Ory's SDK and Integration Tools for JavaScript frameworks. You can do this using npm:

bash npm i --save @ory/integrations @ory/client

[Source](https://www.ory.sh/docs/getting-started/integrate-auth/nextjs#install-ory) 2. Create a Special Route: You need to create a special route in

[...paths].js

at

pages/api/.ory/

. This route connects your Next.js app with Ory's APIs and ensures that all cookies and credentials are set up.

javascript import { config, createApiHandler } from "@ory/integrations/next-edge"    export { config }    export default createApiHandler({    fallbackToPlayground: true,    dontUseTldForCookieDomain: true,   })

[Source](https://www.ory.sh/docs/getting-started/integrate-auth/nextjs#install-ory) 3. Run Your Next.js App: Set up your environment variables to connect with Ory's APIs and start the Next.js development server:

bash export NEXT_PUBLIC_ORY_SDK_URL=https://{project.slug}.<http://projects.oryapis.com|projects.oryapis.com> npm run dev

[Source](https://www.ory.sh/docs/getting-started/integrate-auth/nextjs#run-your-nextjs-app) 4. Add Facebook as a Social Sign-in Provider: If you want to use Facebook as a social sign-in provider, you need to follow the steps outlined in the [Facebook Social Sign-in Guide](https://www.ory.sh/docs/kratos/social-signin/facebook). Please note that the provided knowledge sources do not include specific instructions on how to use the

@ory/client

package to handle social sign-in in a Next.js application. For more detailed instructions, you should refer to the official Ory documentation or the

@ory/client

package documentation.

If you've already integrated Google and GitHub login and can see the social login buttons in the Ory Console > Account Experience section, but not in your Next.js app, it might be due to a few reasons: 1. UI Implementation: Ensure that your Next.js application's user interface is correctly implemented to display the social login buttons. The UI should be designed to fetch the available social sign-in providers and display them. 2. Environment Variables: Check if the environment variables in your Next.js application are correctly set. The

NEXT_PUBLIC_ORY_SDK_URL

should be set to your Ory project URL.

bash export NEXT_PUBLIC_ORY_SDK_URL=https://{project.slug}.<http://projects.oryapis.com|projects.oryapis.com>

[Source](https://www.ory.sh/docs/getting-started/integrate-auth/nextjs#run-your-nextjs-app) 3. Ory Configuration: Make sure that the social sign-in providers are correctly configured in your Ory project. The configuration should be saved and the providers should be enabled. If you've checked all of these and the issue persists, it might be a good idea to refer to the official Ory and Next.js documentation or seek help from the respective communities.

Yes, you still need to set the

NEXT_PUBLIC_ORY_SDK_URL

environment variable. This variable is used to specify the URL of your Ory project, which is necessary for your Next.js application to communicate with Ory's APIs. When you upgrade to production, you will replace the

edgeConfig

from

@ory/integrations/next

with your own configuration that includes the

basePath

set to

NEXT_PUBLIC_ORY_SDK_URL

. Here's an example of how you might do this:

javascript const basePath = process.env.NEXT_PUBLIC_ORY_SDK_URL;  const ory = new FrontendApi(   new Configuration({     basePath: basePath,     baseOptions: {       withCredentials: true,     },   }) );

[Source](https://www.ory.sh/docs/getting-started/integrate-auth/nextjs#go-to-production) Remember to replace

{project.slug}

with your actual project slug:

bash export NEXT_PUBLIC_ORY_SDK_URL=https://{project.slug}.<http://projects.oryapis.com|projects.oryapis.com>

[Source](https://www.ory.sh/docs/getting-started/integrate-auth/nextjs#run-your-nextjs-app)

To solve Cross-Origin Resource Sharing (CORS) errors, you can use Ory Tunnel for local development. In production, you should add your domain to the Ory Project so that all requests from your frontend can be made to Ory under the same domain. Ory has a "deny by default" policy which means that the

Access-Control-Allow-Origin

header is only set on domains they own. Here's how you can set up CORS in Ory Kratos:

yaml serve:    public:    cors:    enabled: true    allowed_origins:    - <https://example.org>    - https://*.<http://example.org|example.org>    allowed_methods:    - POST    - GET    - PUT    - PATCH    - DELETE    allowed_headers:    - Authorization    - Cookie    - Content-Type    exposed_headers:    - Content-Type    - Set-Cookie

Replace

<https://example.org>

and

https://*.<http://example.org|example.org>

with your actual domain and subdomains. [Source 1](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#cors-errors) [Source 2](https://www.ory.sh/docs/kratos/guides/setting-up-cors)

To avoid CORS errors while using the

@ory/client

SDK, you need to ensure that your application and the Ory APIs are available under the same domain. This is because Ory has a "deny by default" policy for CORS, which means that the

Access-Control-Allow-Origin

header is only set on domains they own. Here are the steps you can follow: 1. Local Development: Use [Ory Tunnel](https://www.ory.sh/docs/guides/cli/proxy-and-tunnel) for local development to avoid CORS errors. 2. Production: Add your domain to the Ory Project. This ensures that all requests from your frontend can be made to Ory under the same domain. You can add a custom domain to your Ory Network project following this [guide](https://www.ory.sh/docs/guides/custom-domains). 3. SDK Configuration: When initializing the

@ory/client

SDK, ensure that you set the

withCredentials

option to

true

. This ensures that cookies are included in CORS requests:

javascript var sdk = require("@ory/client")      var ory = new sdk.FrontendApi(    new sdk.Configuration({    basePath: "<https://ory.example.org>",    baseOptions: {    // Ensures that cookies are included in CORS requests:    withCredentials: true,    },    }),   )

Replace

"<https://ory.example.org>"

with your actual domain. [Source 1](https://www.ory.sh/docs/kratos/bring-your-own-ui/custom-ui-basic-integration#cors-errors) [Source 2](https://www.ory.sh/docs/getting-started/integrate-auth/expressjs#go-to-production) [Source 3](https://www.ory.sh/docs/security-model#same-top-level-domain)

The

/self-service/methods/oidc/callback/google

route is not something you define in your Next.js application. This is a route that Ory uses to handle the callback from Google after a user has signed in. When a user signs in with Google, they are redirected back to your application with an authorization code. This code is included in the URL. Ory then exchanges this code for an access token at the

/self-service/methods/oidc/callback/google

endpoint. If you're getting a 404 error, it's likely because your Next.js application is trying to handle this route, but it doesn't exist in your application. Instead, this route should be handled by Ory. To fix this, you need to ensure that your application is correctly configured to proxy requests to Ory. This is typically done in your

next.config.js

file using the

rewrites

function. Here's an example:

javascript module.exports = {   async rewrites() {     return [       {         source: '/self-service/:path*',         destination: '<https://your-ory-instance.com/self-service/:path*>',       },     ];   }, };

Replace

'<https://your-ory-instance.com>'

with the URL of your Ory instance. This configuration tells Next.js to forward any requests that start with

/self-service

to your Ory instance. This way, when a user is redirected back to

/self-service/methods/oidc/callback/google

, the request will be forwarded to Ory, which can then handle the callback. Please note that the provided knowledge sources do not include specific instructions on how to set up rewrites in Next.js for Ory. For more detailed instructions, you should refer to the official Next.js and Ory documentation.