Shopify Customer Login via NextJS

I want to create a login form in NextJS14 and when the customer enter their details, I want them to login to the shopify customer account section. To do that I used Shopify Sign In with Email and Password GraphQL. Code is working fine and the token is also generating. But when the redirection Is happening, it goes back to the Shopify Login form with /account/login?return_url=%2Faccount this URL. Please check my Login form Code below, this includes all code lines. and can anyone suggest me a solution for this one please? // components/LoginForm.js import { useState } from 'react'; import axios from 'axios'; import { useRouter } from 'next/router'; const LoginForm = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const router = useRouter(); const handleSubmit = async (e) => { e.preventDefault(); setError(''); try { const formData = new FormData(); formData.append('form_type', 'customer_login'); formData.append('utf8', '✓'); formData.append('customer[email]', email); formData.append('customer[password]', password); const response = await axios.post('{ STORE URL }/api/2024-07/graphql.json', { query: ` mutation SignInWithEmailAndPassword($email: String!, $password: String!) { customerAccessTokenCreate(input: { email: $email, password: $password }) { customerAccessToken { accessToken expiresAt } customerUserErrors { code message } } } `, variables: { email, password }, }, { headers: { 'X-Shopify-Storefront-Access-Token': 'STORE FRONT API' } }); const { customerUserErrors } = response.data.data.customerAccessTokenCreate; if (customerUserErrors.length > 0) { throw new Error(customerUserErrors[0].message); } // Redirect to the account page after successful login router.push('{Store Domain}/account'); } catch (err) { setError(err.message); } }; return ( <div className="login-form"> <h2>Login to Your Account</h2> <form onSubmit={handleSubmit}> <div> <label>Email:</label> <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} required /> </div> <div> <label>Password:</label> <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required /> </div> {error && <p style={{ color: 'red' }}>{error}</p>} <button type="submit">Login</button> </form> <style jsx>{` .login-form { max-width: 400px; margin: auto; padding: 1em; border: 1px solid #ccc; border-radius: 5px; background: #f9f9f9; } div { margin-bottom: 1em; } label { margin-bottom: .5em; color: #333333; display: block; } input { border: 1px solid #CCCCCC; padding: .5em; width: 100%; } button { padding: .7em; color: white; background-color: #0070f3; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #005bb5; } `}</style> </div> ); }; export default LoginForm; I want the customer to go to their Shopify account straight away. but I got Login form with /account/login?return_url=%2Faccount

Comment (0)

You’ll be in good company