We Keep Coding

React NextAuth credentials null and Auth Not Working

I get the following error:
here is my code:
return (
<>
{Object.values(providers).map((provider) => {
if (provider.id === "credentials") {
return null;
}
return (
<div key={provider.name}>
<Button
variant="outlined"
onClick={() => {
setAppLoading(true);
signIn(provider.id);
setAppLoading(false);
}}
className="w-full uppercase !transform-none mt-4"
>
<Image
height={24}
width={24}
src={`/logos/${provider.name}.svg` || "/logos/google.svg"}
alt={provider.name}
/>
<span className="ml-2 !text-[rgba(26, 26, 44, 0.5)]">
Sign in with {provider.name}
</span>
</Button>
</div>
);
})}
</>
);
};
If I silence the error by adding { providers !=== null && ... }, the page loads however,
the auth does not work at all, almost as if it is not getting fired
Here is the Form Button onSubmit, which gets called when I click it however, the signIn("credentials...}) doesn't fire
import { ClientSafeProvider, signIn } from "next-auth/client";
...
onSubmit={async (values, { setErrors }) => {
const { email, password } = values;
setAppLoading(true);
signIn("credentials", {
email,
password,
redirect: false,
}).then((res) => {
setErrors({ error: res?.error });
});
setAppLoading(false);
}}
...
and lastly, here is my [...nextauth].ts
import login from "features/auth/login";
import register from "features/auth/register";
import NextAuth from "next-auth";
import Providers from "next-auth/providers";
export default NextAuth({
providers: [
Providers.Credentials({
name: "Credentials",
credentials: {
name: { label: "Name", type: "text" },
email: { label: "Email", type: "text" },
password: { label: "Password", type: "password" },
},
async authorize(credentials, _req) {
const { name, email, password } = credentials;
alert("clicked");
console.log("CLICKEEEED!!!!!!!!!!!!!!");
if (typeof name === "undefined") {
return login(email, password);
}
return register(name, email, password);
},
}),
Providers.Google({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
pages: {
signIn: "/auth/signin",
signOut: "/auth/signout",
error: "/auth/error", // Error code passed in query string as ?error=
verifyRequest: "/auth/verify-request", // (used for check email message)
},
session: {
jwt: true,
maxAge: 30 * 24 * 60 * 60, // 30 days
},
});

Are you certain that you have provided valid GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in your .env.local file? This is the most common cause of your error. This would mean that next-auth did not provide you with providers, because of an error in the api.

Array of files cann't be validated by the server(php)

I am trying to pass below data to the laravel backend:
form: new Form( {
name: '',
file2: null,
licenses: [
{name: '', xerox: null},
{name: '', xerox: null},
]
}),
I am facing laravel validation problem. Like, if I tried to send data with the help of FormData() then php received the array and can validate the data except array element (i.e. Licenses) which also contains the attached files in an array of objects.
On backend side, it receives like below image. It doesn’t shows attached licenses images, except the profile image.
Below are the codes details also includes the repo of the project, if it needed.
Could you please tell me how could I sent the data with the attachment to the server?
Example-component.vue
<template>
<b-form #submit.prevent="onSubmit" #keydown="form.errors.clear($event.target.name)">
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="form.name"
placeholder="Enter name"
></b-form-input>
</b-form-group>
<input type="file" id="file" ref="file" v-on:change="handleFileUpload()" class="mb-3"/>
<!--License-->
<b-form-group label="License details(if applicable):" class="">
<b-form-group v-for="(l, index) in form.licenses" :key="l.index" align-v="center" class="">
<b-card bg-variant="light">
<b-form-group>
<b-form-input id="input-license1" v-model="l.name" placeholder="Enter your License name:" class=""></b-form-input>
</b-form-group>
<b-form-group>
<input
type="file"
id="filelicense"
name="xerox"
ref="licenseFile"
v-on:change="handleLicenseFileUpload($event.target.name, $event.target.files[0], index)"
class="mb-3"/>
<div>Selected file: {{ l.xerox ? l.xerox.name : '' }}</div>
</b-form-group>
</b-card>
</b-form-group>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
</b-form>
</template>
<script>
import Form from "../core/Form";
export default {
data() {
return {
form: new Form( {
name: '',
file2: null,
licenses: [
{name: '', xerox: null},
{name: '', xerox: null},
]
}),
isLoading: false
}
},
methods: {
handleLicenseFileUpload(fieldName, SelectedFile, index) {
console.log(SelectedFile);
this.form.licenses[index].xerox = SelectedFile;
},
onSubmit() {
this.isLoading = true;
this.form.post('/candidates')
.then(response => {
this.response = response
console.log(response.data.message)
})
.catch((err) => {
})
.finally(() => {
this.isLoading = false
})
},
handleFileUpload(){
this.form.file2 = this.$refs.file.files[0];
}
},
mounted() {
console.log('Component mounted.')
}
}
</script>
CandidateController.php
public function store(Request $request)
{
$data = $request->validate([
'name' => 'required',
'file2' => '',
'licenses.*.name' => 'required',
'licenses.*.xerox' => 'required',
]);
dd($request->all());
Form.js
courtesy
import Errors from './Errors';
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;
}
setFormData(data) {
let formData = new FormData();
for (let field in data) {
formData.append(field, data[field]);
}
return formData;
}
reset() {
for (let field in this.originalData) {
this[field] = '';
}
this.errors.clear();
}
post(url) {
return this.submit('post', url);
}
submit(requestType, url) {
let config = {
headers: {
Authorization: 'sometoken',
'Content-Type': `multipart/form-data; boundary=${Math.random().toString().substr(2)}`,
}
}
return new Promise((resolve, reject) => {
axios[requestType](url, this.setFormData(this.data()))
.then(response => {
this.onSuccess(response.data);
resolve(response.data);
})
.catch(error => {
this.onFail(error.response.data.errors);
reject(error.response.data);
});
});
}
onSuccess(data) {
//alert(data.message); // temporary
this.reset();
}
onFail(errors) {
this.errors.record(errors);
}
}
export default Form;

Passing variables from within VueJS components

I am new to VueJs and Laravel. I am trying to build a chat app following this tutorial, and my problem is that I am not able to pass a CONTACT variable (object type) from ChatApp.vue to Conversation.vue. The console gives this error
[Vue warn]: Invalid prop: type check failed for prop "contact". Expected Object, got Null
found in ---> <MessageFeed> at resources/js/officer/components/MessageFeed.vue
<Conversation> at resources/js/officer/components/Conversation.vue
<ChatApp> at resources/js/officer/components/ChatApp.vue
<Root>
first the variable has to pass through ChatApp to Conversation and then to MessageFeed. I tried printing it on console, in ChatApp.vue, it printed the variable's property i.e. name but when I try to print it in Conversation.vue, it says it is null and also gives the above error.
please see the code below:
ChatApp.vue
<template>
<div class="chat-app">
<Conversation :contact="selectedContact" :messages="messages" #new="saveNewMessage"/>
<ContactsList :contacts="contacts" #selected="startConversationWith"/>
</div>
</template>
<script>
import Conversation from "./Conversation";
import ContactsList from "./ContactsList";
const axios = require('axios');
export default {
props: {
user: {
type: Object,
required: true
}
},
data() {
return {
selectedContact: null,
messages: [],
contacts: []
}
},
mounted() {
Echo.private(`messages.${this.user.id}`)
.listen('NewMessage', (e) => {
this.handleIncoming(e.message);
});
console.log(this.user);
axios.get('/officer/contacts')
.then((response) => {
this.contacts = response.data;
console.log("chatapp1: " + this.contacts[0].name);
})
.catch((error) => {
// handle error
console.log(error);
});
},
methods: {
startConversationWith(contact) {
axios.get(`/officer/conversation/${contact.id}`)
.then((response) => {
this.message = response.data;
this.selectedContact = contact;
console.log("chatapp: " + this.selectedContact.name);
});
},
saveNewMessage(message) {
this.messages.push(message);
},
handleIncoming(message) {
if (this.selectedContact && message.from === this.selectedContact.id) {
this.saveNewMessage(message);
return;
}
this.updateUnreadCount(message.from_contact, false);
},
updateUnreadCount(contact, reset) {
this.contacts = this.contacts.map((single) => {
if (single.id !== contact.id) {
return single;
}
if (reset)
single.unread = 0;
else
single.unread += 1;
return single;
})
}
},
components: {Conversation, ContactsList}
}
Conversation.vue
<template>
<div class="conversation">
<h1>{{ contact ? contact.name : 'Select a Contact' }}</h1>
<MessagesFeed :contact="contact" :messages="messages"/>
<MessageComposer #send="sendMessage"/>
</div>
</template>
<script>
import MessagesFeed from './MessageFeed';
import MessageComposer from './MessageComposer';
export default {
props: {
contact: {
type: Object,
default: null
},
messages: {
type: Array,
default: []
}
},
mounted() {
console.log("conversation: "+this.contact);
},
methods: {
sendMessage(text) {
if (!this.contact) {
return;
}
console.log(text);
axios.post('/conversation/send', {
contact_id: this.contact.id,
text: text
}).then((response) => {
this.$emit('new', response.data);
})
}
},
components: {MessagesFeed, MessageComposer}
}
MessageFeed.vue
<template>
<div class="feed" ref="feed">
<ul v-if="contact">
<li v-for="message in messages" :class="`message${message.to == contact.id ? 'sent' : 'received'}`"
:key="message.id">
<div class="text">
{{message.text}}
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
contact: {
type: Object,
required: true
},
messages: {
type: Array,
required: true
}
},
methods: {
scrollToBottom() {
setTimeout(() => {
this.$refs.feed.scrollTop = this.$refs.feed.scrollHeight - this.$refs.feed.clientHeight;
}, 1);
}
},
watch: {
contact(contact) {
this.scrollToBottom();
},
messages(messages) {
this.scrollToBottom();
}
}
}
please, let me know what am I missing here.

Because you konfigurated it to be an Object but you declared it on the initial state as null
selectedContact: null
That should be an object
It should look something like this i guess:
selectedContact: {
id:0
}

I fixed the issue.
This was due to axios.get() response thing. It was fetching data from database after a couple of minutes and the Conversation.vue and ContactList.vue were mounting immediately so they were not getting data.
With the help of my friend, it was fixed by loading the component only when axios have got all the contactlist from database and the very first contact have been passed to the Conversation.vue component i.e using v-if property of component.

Hosted fields in braintree gives error "Cannot determine payment method" PHP Laravel

Can anyone please explain me how could i make a working Braintree payment with hosted fields, in Laravel. I tried to look at the documentation myself but i couldn't make it working.
i created the token in the controller to be sent to the view like:
$gateway = new \Braintree\Gateway([
'environment' => config('services.braintree.environment'),
'merchantId' => config('services.braintree.merchantId'),
'publicKey' => config('services.braintree.publicKey'),
'privateKey' => config('services.braintree.privateKey')
]);
$paypalToken = $gateway->ClientToken()->generate();
return view('checkout')->with(['paypalToken' => $paypalToken]);
On the blade view i have this JS:
var form = document.querySelector('#payment-form');
var submit = document.querySelector('input[type="submit"]');
braintree.client.create({
authorization: '{{ $paypalToken }}'
}, function (clientErr, clientInstance) {
if (clientErr) {
console.error(clientErr);
return;
}
braintree.hostedFields.create({
client: clientInstance,
styles: {
'input': {
'font-size': '14px'
},
'input.invalid': {
'color': 'red'
},
'input.valid': {
'color': 'green'
}
},
fields: {
number: {
selector: '#card-number',
placeholder: '4111 1111 1111 1111'
},
cvv: {
selector: '#cvv',
placeholder: '123'
},
expirationDate: {
selector: '#expiration-date',
placeholder: '10/2019'
}
}
}, function (hostedFieldsErr, hostedFieldsInstance) {
if (hostedFieldsErr) {
console.error(hostedFieldsErr);
return;
}
// submit.removeAttribute('disabled');
form.addEventListener('submit', function (event) {
event.preventDefault();
hostedFieldsInstance.tokenize(function (tokenizeErr, payload){
if (tokenizeErr) {
console.error(tokenizeErr);
return;
}
document.querySelector('#nonce').value = payload.nonce;
form.submit();
});
}, false);
});
// Create a PayPal Checkout component.
braintree.paypalCheckout.create({
client: clientInstance
}, function (paypalCheckoutErr, paypalCheckoutInstance) {
if (paypalCheckoutErr) {
console.error('Error creating PayPal Checkout:', paypalCheckoutErr);
return;
}
// Set up PayPal with the checkout.js library
paypal.Button.render({
env: 'sandbox', // or 'production'
commit: true,
payment: function () {
return paypalCheckoutInstance.createPayment({
flow: 'checkout', // Required
amount: '{{ presentPrice($newTotal + 5000) }}', // Required
currency: 'USD', // Required
});
},
onAuthorize: function (data, actions) {
return paypalCheckoutInstance.tokenizePayment(data, function (err, payload) {
// Submit `payload.nonce` to your server.
document.querySelector('#nonce').value = payload.nonce;
form.submit();
});
},
onCancel: function (data) {
console.log('checkout.js payment cancelled', JSON.stringify(data, 0, 2));
},
onError: function (err) {
console.error('checkout.js error', err);
}
}, '#paypal-button').then(function () {
// The PayPal button will be rendered in an html element with the id
// `paypal-button`. This function will be called when the PayPal button
// is set up and ready to be used.
});
});
});
Here is the method in were i process the payment:
$gateway = new \Braintree\Gateway([
'environment' => config('services.braintree.environment'),
'merchantId' => config('services.braintree.merchantId'),
'publicKey' => config('services.braintree.publicKey'),
'privateKey' => config('services.braintree.privateKey')
]);
$nonce = $request->payment_method_nonce;
$result = $gateway->transaction()->sale([
'amount' => round(getNumbers()->get('newTotal') / 100, 2),
'paymentMethodNonce' => $nonce,
'options' => [
'submitForSettlement' => True
]
]);
if ($result->success) {
$transaction = $result->transaction;
$order = $this->addToOrdersTablesPaypal(
$email,
$firstName.' '.$lastName,
null
);
return redirect()->route('confirmation.index')->with('success_message', 'Thank you! Your payment has been successfully accepted!');
} else {
$order = $this->addToOrdersTablesPaypal(
$email,
$firstName.' '.$firstName,
$result->message
);
return back()->withErrors('An error occurred with the message: '.$result->message);
}
can anyone help me, understand what is missing?

i solved it, i actually found an workaround, i had to create a controller for the hosted fields, and it worked.

Remove class for another user vue.js

I have chat message system.
I have code:
<template>
<li :class="className">
{{ message }}
</li>
</template>
<script>
export default {
props: [
'message',
'user',
'time',
'seen',
],
computed: {
className() {
return this.seen;
}
},
mounted() {
console.log('Component mounted.')
}
}
</script>
App.js:
data:{
message: '',
convId: 1,
chat: {
message: [],
user: [],
time: [],
seen: [],
},
typing: '',
},
....
watch: {
message() {
Echo.private('chat')
.whisper('typing', {
name: this.message
});
}
},
methods: {
send(){
if(this.message.length != 0 && this.message.length <= 4000) {
this.chat.message.push(this.message);
this.chat.user.push('you');
this.chat.time.push(this.getTime());
this.chat.seen.push('unread'). //set class unread message for user
axios.post('/sendMessage', {
message: this.message,
//lastName: 'Flintstone'
})
.then(response => {
console.log(response);
this.message = '';
})
.catch(error => {
console.log(error);
});
}
},
seenMessage() {
axios.post('/setMessagesSeen/' + this.convId) //this request mark messages in chat all readed for auhenticated user
.then( response => { this.chat.seen.push(''); //remove unread class })
.catch( response => { console.log(response) } )
},
getTime() {
let time = new Date();
return time.getHours() + ':' + time.getMinutes();
}
},
mounted() {
Echo.private('chat')
.listen('ChatEvent', (e) => {
this.chat.message.push(e.message);
this.chat.user.push(e.user);
this.chat.time.push(this.getTime());
this.chat.seen.push('unread'). //set class unread message for user
console.log(e);
})
.listenForWhisper('typing', (e) => {
if(e.name != '')
this.typing = 'typing..';
else
this.typing = null;
});
}
My chat.blade.php:
<message v-for="value,index in chat.message"
:key=value.index
:user=chat.user[index]
:message="chat.message[index]"
:time="chat.time[index]"
:seen="chat.seen[index]"
>
</message>
<div class="form-group">
<textarea maxlength="4000" cols="80" rows="3" class="message-input form-control" v-model='message' v-on:click="seenMessage"></textarea>
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-primary" v-on:click="send">Send message</button>
</div>
My function seen:
public function setMessagesSeen(Conversation $conversation) {
$user = User::find(Auth::id());
$conversations = Chat::conversation($conversation->id);
//$dd = Chat::conversations($conversation)->for($user)->readAll();
dd(Chat::conversations($conversations)->for($user)->getMessages()->where('body', 'asdfsadfsd'));
//$message = Chat::messages($message)->for($user)->markRead();
broadcast(new HasSeenMessage($message));
return response('ok');
}
How I can send class "unread" to element div other user? I can paste class on current user, and I get color on element chat only for me, but how I can hide element for me and other user, when message is seen?
I want do read/unread function for users.
Example:
If user in real time send message I send class unread, when other user click on textarea, I remove class unread, and said user, that message is seen. How I can do it in real time add/remove class unread? My function is not working.

To do this you have to create an Event in your Laravel application that you will broadcast on a precise channel (you can for example give the name 'chat. {Conversation}. {User_id}') and with Laravel Echo you will listen this event!
I allowed myself to make some changes in your code -:)
I presume you have this class HasSeenEvent
<?php
namespace App\Events;
use App\Order;
use Illuminate\Queue\SerializesModels;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class HasSeenEvent implements ShouldBroadcast
{
use SerializesModels;
public $message;
/**
* Create a new event instance.
*
* #param Message $message
* #return void
*/
public function __construct(Message $message)
{
$this->message = $message;
}
public function broadcastOn()
{
// I presume we can get conversation id like this : $this->message->conversation->id
return new PrivateChannel('chat.'.$this->message->conversation->id.'.'.$this->message->sender->id);
}
}
Then, in your routes/broadcast.php declare this route chat.{conversation}.{user_id}
In the function where you put the 'seen' to 1 you broadcast the event at the same time
broadcast(new HasSeenMessage($message))
Then you listen to this event in your vuejs code
components/Message.js
<template>
<li :class="className">
{{ message }}
</li>
</template>
<script>
export default {
props: [
'message',
'user',
'time',
'readed',
],
computed: {
className() {
return this.readed == 1 ? 'seen' : 'unread';
}
},
mounted() {
console.log('Component mounted.')
}
}
</script>
chat.blade.php
<message v-for="message,index in chat.messages"
:key="index"
:user="message.user"
:message="message.content"
:time="message.time"
:readed="message.readed"
>
</message>
<div class="form-group">
<button type="button" class="btn btn-lg btn-primary" v-on:click="send">Send message</button>
</div>
App.js
data: {
message: '',
convId: 1,
chat: {
messages: [],
/* message: [],
user: [],
time: [],
seen: [], */
},
typing: '',
},
....
watch: {
message() {
Echo.private('chat')
.whisper('typing', {
name: this.message
});
}
},
methods: {
send() {
if (this.message.length != 0 && this.message.length <= 4000) {
let data = {
content: this.message,
user: 'you',
time:this.getTime(),
readed: 0
}
this.chat.messages.push(data)
data = {}
axios.post('/sendMessage', {
message: this.message,
//lastName: 'Flintstone'
})
.then(response => {
console.log(response);
this.message = '';
})
.catch(error => {
console.log(error);
});
}
},
seenMessage() {
axios.post('/setMessagesSeen/' + this.convId) //this request mark messages in chat all readed for auhenticated user
.then(response => {
//This is not the best way to do that
this.chat.messages[this.messages.length -1 ].readed = 0
}).catch(response => {
console.log(response)
})
},
getTime() {
let time = new Date();
return time.getHours() + ':' + time.getMinutes();
}
},
mounted() {
Echo.private('chat')
.listen('ChatEvent', (e) => {
this.chat.messages.push({
content: e.message,
user: e.user,
time: this.getTime(),
readed: 0
})
console.log(e);
})
.listenForWhisper('typing', (e) => {
if (e.name != '')
this.typing = 'typing..';
else
this.typing = null;
});
// I presume to can access to user info
let that = this
Echo.private('chat.'+convId+'.'+user.id)
.listen('HasSeenMessage', (e) => {
let message = e.message
let lookingForMessage = that.chat.messages.find((m) => {
// I presume in your db messages table has field content and time
return m.content == message.content && m.time => message.time
})
try {
lookingForMessage.readed = 1
}catch (err){
// message not found
console.log(err)
}
})
}
Hope it helped you!