Ошибка в авторизации через sidebase/nuxt-auth (nuxt 3)
Я использую стороннее API для получения данных от пользователя. Использую модуль для авторизации sidebase/nuxt-auth. Помогите пожалуйста сделать корректную авторизацию через CredentialsProvider.
Я получил верный ответ от API (пользователь авторизован), но nuxt-auth выдает ошибку Sign in failed. Check the details you provided are correct.
Ниже файл index.vue - здесь форма и функция авторизации singIn() в нее передаю данные с формы (тут все корректно, но для понимания оставлю код ниже)
<template>
<section class="agents-enter">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-lg-6 col-xl-7 d-flex flex-column">
<SectionTitle
title="Партнерам"
subtitle="Приглашаем агентов к сотрудничеству по продаже автобусных билетов"
description="Описание о том, что это и как это работает"
/>
<!-- <img v-if="!isMobile()" class="image-section" alt="Агенты" src="/img/agents/agents.svg"> -->
</div>
<div class="col-12 col-lg-6 col-xl-5 d-flex justify-content-end">
<div class="login-form-wrapper">
<div class="login-form">
<h3 class="title-form text-center">
Вход для агентов
</h3>
<form @submit.prevent="signIn('credentials', { username: userStore.username, password: userStore.password })">
<!-- TODO добавить is-ok-bordered или is-error-bordered для валидации-->
<div class="form-group">
<label for="login" class="form-label">Эл. почта</label>
<div class="position-relative">
<input v-model="userStore.username" id="mail" type="text" class="form-control" name="mail" placeholder="Введите email">
<div class="form-icon-wrapper">
<IconsMail class="form-icon" color="#B5BDDB" />
</div>
<div class="is-error-icon d-none">
<IconsMail class="form-icon" color="#fff" />
</div>
</div>
<div class="error-feedback-bordered d-none">
Неверная почта
</div>
</div>
<div class="form-group">
<label for="passwordInputForm" class="form-label">Пароль</label>
<div class="position-relative">
<input v-model="userStore.password" id="passwordInputForm" type="password" class="form-control" name="password" placeholder="Введите пароль">
<div class="form-icon-wrapper">
<IconsPassword class="form-icon" color="#B5BDDB" />
</div>
<div class="is-error-icon d-none">
<IconsPassword class="form-icon" color="#fff" />
</div>
</div>
<div class="error-feedback-bordered d-none">
Неверный пароль
</div>
</div>
<div class="d-grid mt-4">
<button :class="{'btn-disabled' : !userStore.username || !userStore.password}" type="submit" class="btn d-block">
Войти
</button>
</div>
</form>
<ForgotPasswordLink class="forgotPasswordLink" />
</div>
</div>
</div>
</div>
</div>
</section>
<ForgotPasswordModal />
</template>
<script setup>
import {useUserStore} from "~/stores/userStore";
const userStore = useUserStore()
const { status, data, signIn, signOut } = useSession()
console.log(status.value)
</script>
<script>
export default {
name: "index",
}
</script>
<style scoped>
</style>Это файл [...].ts - здесь описывается логика по работе NuxtAuthHandler. Я думаю, что ошибка непосредственно в axios, возможно, я неправильно его использую.
// file: ~/server/api/auth/[...].ts
import { NuxtAuthHandler } from '#auth'
import CredentialsProvider from "next-auth/providers/credentials";
import axios from "axios";
export default NuxtAuthHandler({
secret: 'your-secret-here',
session: {
strategy: 'jwt'
},
jwt: {
// The maximum age of the NextAuth.js issued JWT in seconds.
// Defaults to `session.maxAge`.
maxAge: 60 * 60 * 24 * 30,
},
providers: [
// @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
CredentialsProvider.default({
// The name to display on the sign in form (e.g. 'Sign in with...')
name: 'Credentials',
// The credentials is used to generate a suitable form on the sign in page.
// You can specify whatever fields you are expecting to be submitted.
// e.g. domain, username, password, 2FA token, etc.
// You can pass any HTML attribute to the <input> tag through the object.
credentials: {
username: { label: 'Username', type: 'text'},
password: { label: 'Password', type: 'password'}
},
async authorize (credentials: any) {
// You need to provide your own logic here that takes the credentials
// submitted and returns either a object representing a user or value
// that is false/null if the credentials are invalid.
let usernameForm = credentials?.username
let passwordForm = credentials?.password
let config = {
url: 'https://api3.evrotrans.net/auth/login',
credentials: 'include',
method: 'post',
headers: {
"Content-type": "application/json; charset=UTF-8"
},
data: '{\"login\":\"' + usernameForm +'\",\"password\":\"' + passwordForm + '\"}',
}
// TODO почему то допускается ошибка авторизации
await axios.request(config).then((response) => {
let user = {username: usernameForm, password: passwordForm, token: response.data.token}
console.log(response.data.message)
if (response.data.error == 0) {
console.log('авторизован' + user)
return user
}
if (response.data.password == 'Incorrect login or password.') {
console.error('неправильный логин или пароль')
return null
}
})
}
})
],
})