Customer Login via NextJS App

Technical Q&A
1

Hi,

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;