change codeVerifier on codeChallenge

src/app/components/VKLogin.tsx

@@ -1,15 +1,14 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import * as VKID from '@vkid/sdk';
 import { vkAuthorization } from '@/app/actions/vkAuth';
 
 export default function VKLogin() {
-	let [codeVerifier, setCodeVerifier] = useState('');
+	const [codeVerifier, setCodeVerifier] = useState<string>('');
+	const [codeChallenge, setCodeChallenge] = useState<string>('');
 
-	const vkButton = useRef<HTMLDivElement>(null)
-
-	function generateAuthString() {
+	async function generateAuthString() {
 		const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_-';
 		const minLength = 43;
 		const maxLength = 128;
@@ -26,36 +25,97 @@ export default function VKLogin() {
 		return result;
 	}
 
-
-	function clickHandler() {
-		/* alert('Кнопка пока не подключена к бизнес аккаунту!'); */
-		console.log('clickHandler');
-		console.log(codeVerifier);
-		VKID.Auth.login()
-			.then(vkidOnSuccess)
-			.catch(console.error);
+	async function generateCodeChallenge(codeVerifier: string) {
+		try {
+			const encoder = new TextEncoder();
+			const data = encoder.encode(codeVerifier);
+			const digest = await crypto.subtle.digest('SHA-256', data);
+			const base64 = btoa(String.fromCharCode(...new Uint8Array(digest)));
+			const base64url = base64
+				.replace(/\+/g, '-')
+				.replace(/\//g, '_')
+				.replace(/=/g, '');
+			return base64url;
+		} catch (error) {
+			console.error('Error generating code challenge:', error);
+			throw error;
+		}
 	}
 
-	function vkidOnSuccess(data: any) {
+
+	async function clickHandler() {
+		console.log('clickHandler');
+		console.log('codeChallenge:', codeChallenge);
+
+		try {
+			// Если codeVerifier пустой, генерируем новый
+			if (!codeVerifier) {
+				const newCodeVerifier = await generateAuthString();
+				const newCodeChallenge = await generateCodeChallenge(newCodeVerifier);
+
+				setCodeVerifier(newCodeVerifier);
+				setCodeChallenge(newCodeChallenge);
+
+				// Обновляем конфигурацию VKID
+				VKID.Config.update({
+					codeChallenge: newCodeChallenge
+				});
+			}
+
+			// Выполняем авторизацию
+			const data = await VKID.Auth.login();
+			vkidOnSuccess(data);
+		} catch (error) {
+			console.error('Authorization error:', error);
+		}
+	}
+
+	async function vkidOnSuccess(data: any) {
 		console.log('vkidOnSuccess');
-		console.log(data);
-		console.log(codeVerifier);
-		vkAuthorization(data, codeVerifier)
-		setCodeVerifier(generateAuthString());
+		console.log('vk data:', data);
+		console.log('codeChallenge :', codeChallenge);
+
+		vkAuthorization(data, codeChallenge);
+
+		const newCodeVerifier = await generateAuthString();
+		const newCodeChallenge = await generateCodeChallenge(newCodeVerifier);
+
+		setCodeVerifier(newCodeVerifier);
+		setCodeChallenge(newCodeChallenge);
+
+		VKID.Config.update({
+			codeChallenge: newCodeChallenge
+		});
+
+		console.log('new codeChallenge:', newCodeChallenge);
 	}
 
 	useEffect(() => {
-		setCodeVerifier(generateAuthString());
-		console.log(codeVerifier);
+		async function initVKID() {
+			try {
+				const newCodeVerifier = await generateAuthString();
+				const newCodeChallenge = await generateCodeChallenge(newCodeVerifier);
 
-		VKID.Config.init({
-			app: 54389559,
-			redirectUrl: 'http://localhost',
-			responseMode: VKID.ConfigResponseMode.Callback,
-			source: VKID.ConfigSource.LOWCODE,
-			scope: 'email phone vkid.personal_info',
-			codeVerifier: "codeVerifier"
-		});
+				setCodeVerifier(newCodeVerifier);
+				setCodeChallenge(newCodeChallenge);
+
+				VKID.Config.init({
+					app: 54389559,
+					redirectUrl: 'http://localhost',
+					responseMode: VKID.ConfigResponseMode.Callback,
+					source: VKID.ConfigSource.LOWCODE,
+					scope: 'email phone vkid.personal_info',
+					codeChallenge: newCodeChallenge
+				});
+
+				console.log('Generated codeVerifier:', newCodeVerifier);
+				console.log('Generated codeChallenge:', newCodeChallenge);
+			} catch (error) {
+				console.error('Error initializing VKID:', error);
+			}
+		}
+
+		initVKID();
 	}, []);
 
 	return (