Solved

How can I pass a custom parameter in Oauth flow with Next Js?

riddleydiddely
Shopify Partner
15 1 3

I have a Next Js app that initiates the Oauth flow for a user.

 

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    try {
        let {store} = req.query
        store = store as string;
        return await ShopifyClient(store + SHOPIFY_SHOP_SUFFIX).auth.begin({
            shop: store + SHOPIFY_SHOP_SUFFIX,
            callbackPath: CALLBACK_PATH,
            isOnline: false,
            rawRequest: req,
            rawResponse: res,
        })
    } catch (e) {
        return res.redirect(400, '/integrations')
    }
}

 

I would like to pass in a custom parameter that I get in my callback later, how do I do this? For example I want to pass an ID so that I can receive it in the callback.

 

The methods I have tried are setting the state param like this and it doesn't work

 

import type {NextApiRequest, NextApiResponse} from 'next'
import '@shopify/shopify-api/adapters/node';
import {ShopifyClient} from "@/components/src/clients/ShopifyClient";

let CALLBACK_PATH = '/api/integrations/callback/shopify';
let SHOPIFY_SHOP_SUFFIX = ".myshopify.com";

export default async function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    try {
        let {store} = req.query
        store = store as string;

        // Capture the auth URL but don't execute the redirect yet.
        const authUrl = await (ShopifyClient(store + SHOPIFY_SHOP_SUFFIX).auth.begin({
            shop: store + SHOPIFY_SHOP_SUFFIX,
            callbackPath: CALLBACK_PATH,
            isOnline: false,
            rawRequest: req,
            rawResponse: res,
        }));

        // Add your custom state parameter to the URL.
        const customState = 'your_custom_state_value_here';
        const authUrlWithState = `${authUrl}&state=${customState}`;

        // Execute the redirect.
        return res.redirect(authUrlWithState);
    } catch (e) {
        return res.redirect(400, '/integrations')
    }
}

 

 

How can I solve this issue?

Accepted Solution (1)

riddleydiddely
Shopify Partner
15 1 3

This is an accepted solution.

I managed to find a solution now. I basically just set a header in the rawRequest param and the it's propagated to the callback, although I don't know if this is good practice nor do I know if this is safe...but hey it works...

 

 

        res.setHeader('Set-Cookie', [`entity_id=${entity_id}; Path=/;`]);

        let storeUrl = store + SHOPIFY_SHOP_SUFFIX
        
        const beginParams = {
            shop: storeUrl,
            callbackPath: CALLBACK_PATH,
            isOnline: false,
            rawRequest: req,
            rawResponse: res,
        } as BeginParams
        
        // Capture the auth URL but don't execute the redirect yet.
        return await ShopifyClient(storeUrl).auth.begin(beginParams);

 

 

View solution in original post

Reply 1 (1)

riddleydiddely
Shopify Partner
15 1 3

This is an accepted solution.

I managed to find a solution now. I basically just set a header in the rawRequest param and the it's propagated to the callback, although I don't know if this is good practice nor do I know if this is safe...but hey it works...

 

 

        res.setHeader('Set-Cookie', [`entity_id=${entity_id}; Path=/;`]);

        let storeUrl = store + SHOPIFY_SHOP_SUFFIX
        
        const beginParams = {
            shop: storeUrl,
            callbackPath: CALLBACK_PATH,
            isOnline: false,
            rawRequest: req,
            rawResponse: res,
        } as BeginParams
        
        // Capture the auth URL but don't execute the redirect yet.
        return await ShopifyClient(storeUrl).auth.begin(beginParams);