I am trying to use forgot password function from strapi's Authentication documentation. When trying to send forgot password request to the api returning an 401 error. I am using vue js as frontend framework.
<template>
<form #submit.prevent="onForgetPassword">
<label for="name">your email</label>
<input type="email" class="from-input" placeholder="Enter Your Email..." v-model="email"/>
<button type="submit" class="form-btn">reset password</button>
</form>
</template>
data() {
return {
email: ""
};
},
methods: {
onForgetPassword() {
axios
.post("http://localhost:1337/auth/forgot-password", {
email: this.email
})
.then(response => {
// Handle success.
console.log("Your user received an email");
})
.catch(error => {
// Handle error.
console.log("An error occurred:", error);
});
}
}
Related
i am creating the login form in vuejs.i tested through postman api working well. when i check with vue js validtaion it is not working.login Error,Uncaught (in promise) csrf Vue js laravel.
what i tried so far i attached below.i think the json validation problem can you check it.i attached the full source code below.
Login.vue
<template>
<div class="row">
<div class="col-sm-4" >
<h2 align="center"> Login</h2>
<form #submit.prevent="LoginData">
<input type="hidden" name="_token" :value="csrf">
<div class="form-group" align="left">
<label>Email</label>
<input type="email" v-model="student.email" class="form-control" placeholder="Mobile">
</div>
<div class="form-group" align="left">
<label>Password</label>
<input type="password" v-model="student.password" class="form-control" placeholder="Mobile">
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import axios from 'axios';
Vue.use(axios)
export default {
name: 'Registation',
data () {
return {
csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
result: {},
student:{
email: '',
password: ''
}
}
},
created() {
},
mounted() {
console.log("mounted() called.......");
},
methods: {
LoginData()
{
axios.post("http://127.0.0.1:8000/api/login", this.student)
.then(
({data})=>{
console.log(data);
try {
if (data === true) {
alert("Login Successfully");
this.$router.push({ name: 'HelloWorld' })
} else {
alert("Login failed")
}
} catch (err) {
alert("Error, please try again");
}
}
)
}
}
}
</script>
LoginController
public function check(Request $request)
{
$credentials = $request->validate([
'email' => ['required', 'email'],
'password' => ['required'],
]);
if (Auth::attempt($credentials))
{
return response()->json(['data' => true ]);
}
return response()->json(['data' => 'Fail']);
}
}
According to Laravel 9 docs you have to send csrf token. Here's the link that talk about it:
https://laravel.com/docs/9.x/sanctum#csrf-protection
Im trying to make a post in a vue component with Laravel Api.
I got CSRF token in my welcome.blade.php:
<meta name="csrf-token" content="{{ csrf_token() }}">
Page does not refresh or add anything when i click on the button.
If i click on the button i get this in my console:
POST http://localhost/api/post 419 (unknown status)
PostList.vue
<template>
<div class="container py-4">
<form enctype="multipart/form-data" method="post" action="" #submit.prevent="addPost">
<input type="hidden" name="_token" value=""/>
<div class="modal-header">
<h4 class="modal-title">Create Post</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Title</label>
<input type="text" class="form-control" placeholder="Title" v-model="post.title">
</div>
<div class="form-group">
<label>Description</label>
<textarea class="form-control" placeholder="Body" v-model="post.body"></textarea>
</div>
</div>
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
<input type="submit" class="btn btn-primary" value="Add">
</div>
</form>
</div>
</template>
<script>
export default {
data() {
return {
post: {
id: '',
title: '',
body: ''
}
};
},
created() {
this.getPosts();
},
methods: {
addPost(){
fetch('api/post', {
method: 'post',
body: JSON.stringify(this.post),
headers: {
'content-type': 'apllication/json'
}
})
.then(response => response.json())
.then(data => {
this.getPosts();
})
.catch(err => console.log(err));
}
}
};
</script>
PostController.php
public function store_vue(Request $request){
$post = new Posts();
$post->title = $request->get('title');
$post->body = $request->get('body');
$post->slug = Str::slug($post->title);
$post->author_id = $request->user()->id;
if ($post->save()) {
return new PostResource($post);
}
}
You are getting a 419 error because the request is missing the CSRF token.
You can add it to your form and see if it works for you
<form enctype="multipart/form-data" method="post" action="" #submit.prevent="addPost">
<input type="hidden" name="_token" value="{{ csrf_token() }}" />
OR
Add the header with the CSRF to your call
<script>
export default {
data() {
return {
post: {
id: '',
title: '',
body: ''
}
};
},
created() {
this.getPosts();
},
methods: {
addPost(){
fetch('api/post', {
method: 'post',
body: JSON.stringify(this.post),
headers: {
'content-type': 'apllication/json',
'X-CSRF-TOKEN': document.querySelector("meta[property='csrf-token']").getAttribute("content");
}
})
.then(response => response.json())
.then(data => {
this.getPosts();
})
.catch(err => console.log(err));
}
}
};
</script>
Laravel has a middleware called VerifyCsrfToken which is enabled by default. It makes sure all POST requests have a csrf token. This tokens make sure the request is sent from our app only and not from any 3rd party scraper or form submiting tool.
When controller does not get _token in request, it throws error.
Add this 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
on header section in like belwo
You can try this
<script>
export default {
data() {
return {
post: {
id: '',
title: '',
body: ''
}
};
},
created() {
this.getPosts();
},
methods: {
addPost(){
fetch('api/post', {
method: 'post',
body: JSON.stringify(this.post),
headers: {
'content-type': 'apllication/json',
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
})
.then(response => response.text())
.then(data => {
this.getPosts();
})
.catch(err => console.log(err));
}
}
};
</script>
I've trouble when using Template Metronic Vue (demo 7).
I've difficult with using login/register default Metronic Template, so I want to make my custom Login/register and another method CRUD with Laravel MIX API, But when I requested API with Axios, the request always catch Error.
is there any special method when I access custom API in Metronic templates?
In this code, I want to try console.log(). This is code :
<b-form class="form" #submit.stop.prevent="onSubmit">
<b-form-input
class="form-control form-control-solid h-auto py-5 px-6"
type="email"
v-model="this.form.email"
></b-form-input>
<b-form-input
class="form-control form-control-solid h-auto py-5 px-6"
type="password"
v-model="this.form.password"
></b-form-input>
<button type="submit" class="btn btn-primary font-weight-bold px-9 py-4 my-3 font-size-3">
Sign In
</button>
</b-form>
<script>
import axios from 'axios'
export default {
name: 'login',
data() {
return {
form: {
email: '',
password: ''
}
}
},
methods: {
onLogin() {
axios.post('http://localhost:8000/api/getUser')
.then(response =>
console.log(response)
})
.catch(error => {
console.log('error created')
console.log(error)
})
}
}
}
</script>
postman
console
To use this code you should remove two things:
Remove MockService initialization from the main.js
// Remove this to disable mock API
MockService.init();
Remove API initialization from the main.js
// API service init
ApiService.init();
I have installed and configured Laravel 7.3 Passport, then I made a fresh install of Nuxt.js and configure it as explained here (works perfect with Laravel 5.8.34). But when logging in, I get a CORS error message in the javascript console:
Access to XMLHttpRequest at 'http://my-laravel.test/oauth/token' from
origin 'http://localhost:3000' has been blocked by CORS policy:
Response to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource.
Below is how I configured Nuxt.js:
pages/index.vue
<template>
<section class="container">
<div>
<strong>Home Page</strong>
<pre>Both guests and logged in users can access!</pre>
<nuxt-link to="/login">Login</nuxt-link>
</div>
</section>
</template>
pages/login.vue
<template>
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-md-5">
<form>
<div class="form-group">
<input
v-model="user.username"
class="form-control"
placeholder="Username"
/>
</div>
<div class="form-group">
<input
v-model="user.password"
type="password"
class="form-control"
placeholder="Password"
/>
</div>
<button
#click.prevent="passwordGrantLogin"
type="submit"
class="btn btn-primary btn-block"
>
Login with Password Grant
</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
middleware: 'guest',
data() {
return {
user: {
username: '',
password: ''
}
}
},
mounted() {},
methods: {
async passwordGrantLogin() {
await this.$auth.loginWith('password_grant', {
data: {
grant_type: 'password',
client_id: process.env.PASSPORT_PASSWORD_GRANT_ID,
client_secret: process.env.PASSPORT_PASSWORD_GRANT_SECRET,
scope: '',
username: this.user.username,
password: this.user.password
}
})
}
}
}
</script>
pages/profile.vue
<template>
<section class="container">
<div>
<strong>Strategy</strong>
<pre>{{ strategy }}</pre>
</div>
<div>
<strong>User</strong>
<pre>{{ $auth.user }}</pre>
</div>
<button #click="logout" class="btn btn-primary">
Logout
</button>
</section>
</template>
<script>
export default {
middleware: 'auth',
data() {
return {
strategy: this.$auth.$storage.getUniversal('strategy')
}
},
mounted() {},
methods: {
async logout() {
await this.$auth.logout()
}
}
}
</script>
nuxt.config.js (partly)
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
'#nuxtjs/proxy',
'#nuxtjs/pwa',
'#nuxtjs/auth',
'#nuxtjs/dotenv',
'bootstrap-vue/nuxt'
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {
baseURL: process.env.LARAVEL_ENDPOINT,
// proxy: true
},
// Proxy module configuration
proxy: {
'/api': {
target: process.env.LARAVEL_ENDPOINT,
pathRewrite: {
'^/api': '/'
}
}
},
// Auth module configuration
auth: {
// redirect: {
// login: '/login',
// logout: '/',
// callback: '/login',
// home: '/profile'
// },
// strategies: {
// 'laravel.passport': {
// url: '/',
// client_id: process.env.PASSPORT_PASSWORD_GRANT_ID,
// client_secret: process.env.PASSPORT_PASSWORD_GRANT_SECRET
// }
// }
strategies: {
local: false,
password_grant: {
_scheme: 'local',
endpoints: {
login: {
url: '/oauth/token',
method: 'post',
propertyName: 'access_token'
},
logout: false,
user: {
url: 'api/auth/me',
method: 'get',
propertyName: 'user'
}
}
}
}
},
middleware/guest.js
export default function({ store, redirect }) {
if (store.state.auth.loggedIn) {
return redirect('/')
}
}
.env
LARAVEL_ENDPOINT='http://my-laravel.test/'
PASSPORT_PASSWORD_GRANT_ID=6
PASSPORT_PASSWORD_GRANT_SECRET=p9PMlcO***********GFeNY0v7xvemkP
As you can see in the commented code source, I also tried unsuccessfully with proxy as suggested here and with auth strategy laravel.passport as suggested here.
Go to cors.php and make sure you have oauth endpoint like api/* or laravel sanctum.
You have to clear config and cache before test again
I am developing an application with with Laravel 5.3 and Vue 2 I implemented a form-validation via Vue 2 but the it doesn't check the request for any errors on client-side it firstly lets every single request to be sent to the server and then displays the errors which are sent back from the server, in the following you can find my code
class Form {
constructor(data) {
this.originalData = data;
for (let field in data) {
this[field] = data[field];
}
this.errors = new Errors();
}
data() {
let data = {};
for (let property in this.originalData) {
data[property] = this[property];
}
return data;
}
reset() {
for (let field in this.originalData) {
this[field] = '';
}
this.errors.clear();
}
post(url) {
return this.submit('post', url);
}
submit(requestType, url) {
return new Promise((resolve, reject) => {
axios[requestType](url, this.data())
.then(response => {
this.onSuccess(response.data);
resolve(response.data);
})
.catch(error => {
this.onFail(error.response.data);
reject(error.response.data);
});
});
}
onSuccess(data) {
alert(data.message);
this.reset();
}
onFail(errors) {
this.errors.record(errors);
}
}
and this is the `Vue class
` `new Vue({
el: "#form",
data: {
form: new Form({
name: '',
description: ''
})
},
methods: {
onSubmit() {
this.form.post('/admin/category');
//.then(response => alert('Item created successfully.'));
//.catch(errors => console.log(errors));
},
onSuccess(response) {
alert(response.data.message);
form.reset();
}
}
});`
and this is my HTML form
<form method="post" id="form" action="{{ url('admin/category') }}" '
#submit.prevent="onSubmit" #keydown="form.errors.clear($event.target.name)">
{{ csrf_field() }}
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name"
v-model="form.name" placeholder="Name">
<span class="help is-danger"
v-if="form.errors.has('name')" v-text="form.errors.get('name')"></span>
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" name="description"
v-model="form.description" placeholder="Description"></textarea>
<span class="help is-danger"
v-if="form.errors.has('description')"
v-text="form.errors.get('description')"></span>
</div>
<button type="submit" class="btn btn-default" :disabled="form.errors.any()">Create New Category</button>
</form>
Question:
I need to modify the code in a way that firstly it checks on client side and if it finds any errors prevent the request from being sent to the server not letting every single request to be sent to server and then displays the errors sent back from the server
You can use any type of client side validation with your setup, just before you submit the form you can take the data from the Form class and validate it with vanilla javascript or any other validation library.
Let's use validate.js as an example:
in your onSubmit method you can do:
onSubmit() {
//get all the fields
let formData = this.form.data();
//setup the constraints for validate.js
var constraints = {
name: {
presence: true
},
description: {
presence: true
}
};
//validate the fields
validate(formData, constraints); //you can use this promise to catch errors
//then submit the form to the server
this.form.post('/admin/category');
//.then(response => alert('Item created successfully.'));
//.catch(errors => console.log(errors));
},