change codeVerifier on codeChallenge

.env

@@ -1,2 +1,2 @@
 SESSION_SECRET=odW+sq1yKte/gMgUUu/B/OyXqr45/LMYplPVOlWc+uo=
-DEV_URL=http://localhost
+DEV_URL=http://localhost:81

package.json

@@ -3,7 +3,7 @@
 	"version": "0.12.0",
 	"private": true,
 	"scripts": {
-		"dev": "next dev -p 2999",
+		"dev": "next dev -p 80",
 		"build": "next build",
 		"start": "next start -p 2999",
 		"lint": "eslint"

src/app/actions/vkAuth.ts

@@ -5,14 +5,14 @@ import { createSession } from '@/app/actions/session';
 import { redirect } from 'next/navigation';
 
 
-export async function vkAuthorization(data : any, codeVerifier: string) {
+export async function vkAuthorization(data : any, codeChallenge: string) {
 
 	console.log(data);
-	console.log(codeVerifier);
+	console.log(codeChallenge);
 	const { code, state, device_id } = data
 
 	try {
-		const response = await fetch(`${API_BASE_URL}/api/v1/vk/authorization/${code}/${state}/${codeVerifier}/${device_id}`, {
+		const response = await fetch(`${API_BASE_URL}/api/v1/vk/authorization/${code}/${state}/${codeChallenge}/${device_id}`, {
 			method: 'GET',
 			headers: {
 				"Content-Type": "application/json",
@@ -21,6 +21,7 @@ export async function vkAuthorization(data : any, codeVerifier: string) {
 		});
 		if (response.ok) {
 			let parsed = await response.json();
+			console.log(parsed);
 			if (parsed.message_desc === 'Operation successful') {
 				/* await createSession(parsed.message_body.token, email); */
 			} else {

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 (