Login issue

[Pankajmehta1998]

This is my code and i have used ngrok for localhost and when i am clicking on signin i am getting :

and this is my code:
`import { Link } from '@remix-run/react';
import { useState, useEffect } from 'react';

export default function Login() {
const [signinData, setSigninData] = useState({
Email: "",
Password: ""
});
const [authorizationUrl, setAuthorizationUrl] = useState('');

const handleChange = (e: any) => {
const { name, value } = e.target;
setSigninData({
...signinData,
[name]: value
});
};

useEffect(() => {
if (typeof window !== 'undefined') {
// Utility function to generate a random string
const generateRandomString = (length: any) => {
const array = new Uint8Array(length);
window.crypto.getRandomValues(array);
return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
};

  // Utility function to generate a random string (code verifier)
  const generateCodeVerifier = () => {
    const array = new Uint32Array(32);
    window.crypto.getRandomValues(array);
    return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
  };

  // Utility function to generate a base64 URL encoded SHA-256 hash (code challenge)
  const generateCodeChallenge = async (verifier: any) => {
    const encoder = new TextEncoder();
    const data = encoder.encode(verifier);
    const hash = await window.crypto.subtle.digest('SHA-256', data);
    const base64String = btoa(String.fromCharCode(...new Uint8Array(hash)));
    return base64String
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  };

  const setupAuthorizationUrl = async () => {
    const clientId = 'shp_45473274573254753547gjgjg';
    const shopId = '12345678909';
    const redirectUri = 'https://df1c-103-182-161-170.ngrok-free.app/account/authorize';
    const state = generateRandomString(32);
    const nonce = generateRandomString(32);

    const verifier = generateCodeVerifier();
    const challenge = await generateCodeChallenge(verifier);

    localStorage.setItem('code-verifier', verifier);
    const authorizationRequestUrl = new URL(
      	`https://shopify.com/${shopId}/auth/oauth/authorize`
    );
    authorizationRequestUrl.searchParams.append('scope', 'openid email https://api.customers.com/auth/customer.graphql');
    authorizationRequestUrl.searchParams.append('client_id', clientId);
    authorizationRequestUrl.searchParams.append('response_type', 'code');
    authorizationRequestUrl.searchParams.append('redirect_uri', redirectUri);
    authorizationRequestUrl.searchParams.append('state', state);
    authorizationRequestUrl.searchParams.append('nonce', nonce);
    authorizationRequestUrl.searchParams.append('code_challenge', challenge);
    authorizationRequestUrl.searchParams.append('code_challenge_method', 'S256');

    setAuthorizationUrl(authorizationRequestUrl.toString());
  };

  setupAuthorizationUrl();
}

}, []);

const handleLogin = (e: any) => {
e.preventDefault();
if (authorizationUrl) {
window.location.href = authorizationUrl;
}
};

return (

Login

Don't have an account yet?

Create account

Email

Password

      <Link className="forgot-password" to="#recover">Forgot your password?</Link>
      <button className="account-create-button" type="submit">Sign in</button>
      <Link className="account-return-to-shop" to="/">Return to Store</Link>
    </form>
  </div>
</div>

);
}`
its not working for me : #1893 earlier i was getting this but now i am getting:

[blittle]

Hi, are you using Hydrogen? Or are you using the customer account API with another framework?

[Pankajmehta1998]

Hi @blittle, i am using hydrogen, i have integrated authorization means i am getting otp screen but when i am entering otp then hitting next then its redirecting me to bad request page means i am not able to login.
This is my code:
` useEffect(() => {
if (typeof window !== 'undefined') {
// Utility function to generate a random string
const generateRandomString = (length: any) => {
const array = new Uint8Array(length);
window.crypto.getRandomValues(array);
return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
};

  // Utility function to generate a random string (code verifier)
  const generateCodeVerifier = () => {
    const array = new Uint32Array(32);
    window.crypto.getRandomValues(array);
    return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');
  };

  // Utility function to generate a base64 URL encoded SHA-256 hash (code challenge)
  const generateCodeChallenge = async (verifier: any) => {
    const encoder = new TextEncoder();
    const data = encoder.encode(verifier);
    const hash = await window.crypto.subtle.digest('SHA-256', data);
    const base64String = btoa(String.fromCharCode(...new Uint8Array(hash)));
    return base64String
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '');
  };

  const setupAuthorizationUrl = async () => {
    const clientId = 'shp_1sdjsadxshd23232343efsdvfsdfs';
    const shopId = '12345678903';
    const redirectUri = 'https://1f7b-103-182-161-170.ngrok-free.app/account/authorize';
    const state = generateRandomString(32);
    const nonce = generateRandomString(32);

    const verifier = generateCodeVerifier();
    const challenge = await generateCodeChallenge(verifier);

    localStorage.setItem('code-verifier', verifier);
    const authorizationRequestUrl = new URL(
      `https://shopify.com/${shopId}/auth/oauth/authorize`
    );
    authorizationRequestUrl.searchParams.append('scope', 'openid email https://api.customers.com/auth/customer.graphql');
    authorizationRequestUrl.searchParams.append('client_id', clientId);
    authorizationRequestUrl.searchParams.append('response_type', 'code');
    authorizationRequestUrl.searchParams.append('redirect_uri', redirectUri);
    authorizationRequestUrl.searchParams.append('state', state);
    authorizationRequestUrl.searchParams.append('nonce', nonce);
    authorizationRequestUrl.searchParams.append('code_challenge', challenge);
    authorizationRequestUrl.searchParams.append('code_challenge_method', 'S256');

    setAuthorizationUrl(authorizationRequestUrl.toString());
  };

  setupAuthorizationUrl();
}

}, []);

const obtainAccessToken = async (code: any) => {
const clientId = 'shp_1sdjsadxshd23232343efsdvfsdfs';
const body = new URLSearchParams();
const clientSecret = "32dfcdsxfsdfvsfdvfs2432432243";
const credentials = btoa(${clientId}:${clientSecret});
body.append('grant_type', 'authorization_code');
body.append('client_id', clientId);
body.append('redirect_uri', 'https://1f7b-103-182-161-170.ngrok-free.app/account/authorize');
body.append('code', code);

const codeVerifier: any = localStorage.getItem('code-verifier');
body.append('code_verifier', codeVerifier);

const headers = {
  'content-type': 'application/x-www-form-urlencoded',
  'Authorization': `Basic ${credentials}`
};

const response = await fetch(`https://shopify.com/12345678903/auth/oauth/token`, {
  method: 'POST',
  headers: headers,
  body,
});

const { access_token, refresh_token } = await response.json();
localStorage.setItem('access_token', access_token);
localStorage.setItem('refresh_token', refresh_token);

};

const refreshAccessToken = async (refresh_token: any) => {
const clientId = 'shp_1sdjsadxshd23232343efsdvfsdfs';
const body = new URLSearchParams();
const clientSecret = "32dfcdsxfsdfvsfdvfs2432432243";
const credentials = btoa(${clientId}:${clientSecret});

body.append('grant_type', 'refresh_token');
body.append('client_id', clientId);
body.append('refresh_token', refresh_token);

const headers = {
  'content-type': 'application/x-www-form-urlencoded',
  'Authorization': `Basic ${credentials}`
};

const response = await fetch(`https://shopify.com/12345678903/auth/oauth/token`, {
  method: 'POST',
  headers: headers,
  body,
});

const { access_token, expires_in, refresh_token: new_refresh_token } = await response.json();
localStorage.setItem('access_token', access_token);
localStorage.setItem('refresh_token', new_refresh_token);

};

const exchangeToken = async () => {
const clientId = 'shp_1sdjsadxshd23232343efsdvfsdfs';
const customerApiClientId = '7aasd234234234sgdgfsd234';
const accessToken: any = localStorage.getItem('access_token');
const clientSecret = "32dfcdsxfsdfvsfdvfs2432432243";
const credentials = btoa(${clientId}:${clientSecret});
const body = new URLSearchParams();

body.append('grant_type', 'urn:ietf:params:oauth:grant-type:token-exchange');
body.append('client_id', clientId);
body.append('audience', customerApiClientId);
body.append('subject_token', accessToken);
body.append('subject_token_type', 'urn:ietf:params:oauth:token-type:access_token');
body.append('scopes', 'https://api.customers.com/auth/customer.graphql');

const headers = {
  'content-type': 'application/x-www-form-urlencoded',
  'Authorization': `Basic ${credentials}`
};

const response = await fetch(`https://shopify.com/12345678903/auth/oauth/token`, {
  method: 'POST',
  headers: headers,
  body,
});

const { access_token } = await response.json();
localStorage.setItem('exchanged_access_token', access_token);

};

const handleLogin = async (e) => {
e.preventDefault();
console.log("authorizationUrl", authorizationUrl)
if (authorizationUrl) {
window.location.href = authorizationUrl;
}
};

useEffect(() => {
const handleAuthorizationCode = async () => {
const params = new URLSearchParams(window.location.search);
const code = params.get('code');
if (code) {
await obtainAccessToken(code);
const refreshToken = localStorage.getItem('refresh_token');
await refreshAccessToken(refreshToken);
await exchangeToken();
}
};

handleAuthorizationCode();

}, []);
`
Can you please help me what needs to be removed or added, as i have added obtain token, refresh and exchange within same file. Whenever i enter otp which is shared to email, and then hit enter its redirecting me to bad request.