How can I enable social login with Next.js and Shopify's GraphQL API?

[Harsh12341]

Hello all,

i am using Nextjs as a frontend and shopify as a backend i am using storefronts graphql api . I want to login with social media like gmail, facebook . how i can get storefront api for social login. give me any solution for it .

Thank you in advance 

[magecomp]

Hello @Harsh12341 

1. Go to your Shopify admin and click on Development > APIs & Services > Create an API key.
2. Select the Storefront API and click on Create.
3. Copy the API key and API secret.
4. In your Next.js project, create a file called .env.local and add the following environment variables:

NEXT_PUBLIC_SHOPIFY_API_KEY=<your_shopify_api_key>
NEXT_PUBLIC_SHOPIFY_API_SECRET=<your_shopify_api_secret>

1. Import the Shopify library and create a new ShopifyClient instance.

import Shopify from "shopify";

const client = new Shopify({
  apiKey: process.env.NEXT_PUBLIC_SHOPIFY_API_KEY,
  apiSecret: process.env.NEXT_PUBLIC_SHOPIFY_API_SECRET,
});

Use the client instance to make a request to the /admin/customers/socialLogin endpoint.

const response = await client.request({
  method: "POST",
  path: "/admin/customers/socialLogin",
  body: {
    socialProvider: "facebook",
    accessToken: "your_facebook_access_token",
  },
});

The response object will contain the customer's information, including their email address and Shopify customer ID.

You can use the customer's email address and Shopify customer ID to create a new user account in your Next.js application.

Here is an example of how to create a new user account:

const user = await client.customers.create({
  email: response.customer.email,
  password: "your_password",
});

Once you have created a new user account, you can redirect the user to your application's home page.

const redirectUrl = `/`;

await client.redirect(redirectUrl);

The user will be redirected to your application's home page and they will be logged in.

[mhmdjaw]

But then how do I validate the session from this point to check authentication status? If the user for example tries to access another protected page how do I validate the token in the next middleware to confirm that this user is still logged in with shopify?