We Keep Coding

How to create a new user along with their profile images in Sanity?

Hi I am a beginner to Sanity and I am working on a personal project. All I want to know is how do I add a user along with his profile Image selected as a file from his device to the Sanity Database. I want the details whatever they entered in this form to be saved in the backend. I am using Next.js.
<div className="flex h-screen flex-col items-center justify-center bg-[#171821]">
<div className="m-6">
<form>
<input
aria-label="Enter your email address"
type="text"
placeholder="User Name"
className="text-gray-base mr-3 mb-2 h-2 w-full roundedpy-5 px-4 text-sm bg-black text-white"/>
<button type="submit" className="mt-5 w-full bg-green-400 p-2">
Add User
</button>
</form>
</div>
</div>
Here is my simple sanity schema
export default {
name: 'user',
title: 'User',
type: 'document',
fields: [
{
name: 'user_name',
title: 'User Name',
type: 'string',
},
{
name: 'profile_image',
title: 'Profile Image',
type: 'image',
},
]
}

You can use the JavaScript client to perform mutations like this. If each user is aligned with a document, you might look at the create() method. Be sure you consider the security of your token, as you'll need to use a write token and that will provide full CRUD access to your entire project's content.

Initialize the sanity client:
import SanityClient from '#sanity/client'
export const client = sanityClient({
projectId: process.env.SANITY_PROJECT_ID,
dataset: 'production',
apiVersion: 'v1',
token: process.env.SANITY_TOKEN,
useCdn: false,
})
write an api function in pages/api/createUser
import { client } from '../../lib/sanity'
const createUserOnSanity = async (req, res) => {
try {
const userDoc = {
_type: 'users',
name: req.body.name,
profileImage: req.body.profileImage,
...
}
await client.createIfNotExists(userDoc)
res.status(200).send({ message: 'success' })
} catch (error) {
res.status(500).send({ message: 'error', data: error.message })
}
}
export default createUserOnSanity
Then in your component, make a post request to this api
try {
await fetch(`/api/createUser`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: name,
// uploading file from computer needs extra work
// I just pass url
profileImage: event.target.url.value,
}),
})
} catch (error) {
console.error(error)
}

Email.js Works Locally, But not Once Deployed With React

I have set up Email.js to make a contact page for a website built with Next.js. It works completely fine when run locally, but does not work when hosted. The form does not even reset when the submit button is clicked. I do this in the sendEmail function. The error handler does not trigger either in the .then block. I get this error in the browser console:
Uncaught The user ID is required. Visit https://dashboard.emailjs.com/admin/integration
Here is how I send the emails:
export default function Book(props) {
const form = useRef();
const [sentMessage, setSentMessage] = useState();
const sendEmail = (e) => {
e.preventDefault();
emailjs
.sendForm(
props.SERVICE_ID,
props.EMAIL_TEMPLATE_ID,
form.current,
props.USER_ID
)
.then(
function (response) {
setSentMessage("Message sent successfully!");
},
function (error) {
setSentMessage("Message failed please email directly.");
}
);
document.getElementById("form").reset();
};
return (
<div className={styles.container}>
<div className={styles.formContainer}>
<form
className={styles.form}
ref={form}
onSubmit={sendEmail}
id="form"
>
<h3>Name (required):</h3>
<input type="text" required={true} name="user_name"></input>
<h3>Email (required):</h3>
<input type="email" required={true} name="user_email"></input>
<h3>Phone number (required):</h3>
<input type="number" required={true} name="phone_number"></input>
<h3>Message (optional):</h3>
<textarea name="message"></textarea>
<button type="submit" value="Send">
Submit
</button>
{sentMessage ? <p>{sentMessage}</p> : <p></p>}
</form>
</div>
</div>
);
}
export async function getServerSideProps() {
return {
props: {
USER_ID: process.env.USER_ID,
EMAIL_TEMPLATE_ID: process.env.EMAIL_TEMPLATE_ID,
SERVICE_ID: process.env.SERVICE_ID,
},
};
}
I have a .env.local file with the template id, user id and service id that all work fine locally. I use next-env and dotenv-load in the next.config.js file like so:
dotenvLoad();
const withNextEnv = nextEnv();
module.exports = withNextEnv({
reactStrictMode: true,
webpack(config) {
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ["#svgr/webpack"],
});
return config;
},
});
I saw some problems online that people had with Gmail and remote email servers, so I switched the account to have no 2 factor authentication and use less secure apps as well. That had no effect.

All you need to do is set up the environment variables in the next.js dashboard then rebuild the site so they take effect.

How to add permissions to a new API with STRAPI (not from dashboard)

I need to do a new api in order to send an email with sendgrid. I followed the official doc and other examples so I did:
config/plugins
module.exports = ({ env }) => ({
email: {
provider: 'sendgrid',
providerOptions: {
apiKey: env('SENDGRID_API_KEY'),
},
settings: {
defaultFrom: 'juliasedefdjian#strapi.io',
defaultReplyTo: 'juliasedefdjian#strapi.io',
},
},
});
then I did a new folder named email in api folder
api/email/config/routes.json
{
"routes": [
{
"method": "POST",
"path": "/email",
"handler": "email.index",
"config": {
"policies": []
}
}
]
}
finally under api/email/controllers/email.js
const { default: createStrapi } = require('strapi');
module.exports = {
index: async (ctx) => {
//build email with data from ctx.request.body
await createStrapi.plugins['email'].services.email.send({
to: 'email#email.com',
from: 'email#email.com',
replyTo: 'email#email.com',
subject: 'test',
text: 'test',
});
ctx.send('Email sent!');
},
};
The real problem is that /email api returns me a 403 even if I did this from the dashboard:
I have done many APIs with strapi but I have never sent emails with it.
Is there a way to add permissions from the code? I have to say that if I use GET method it works, but I need to do it with a POST method, which doesn't. Did I miss something?

How do i fix an internal server error when authenticating with Next-Auth

I am trying to add authentication to my Next.js project with Next-Auth, however I am stuck on a 500 internal server error after submitting credentials (http://localhost:3000/api/auth/error?error=Configuration).
I think it might be something to do with running on http://localhost:3000 but I'm not sure. Can anyone see what i'm doing wrong?
pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
const options = {
site: 'http://localhost:3000',
providers: [
Providers.Credentials({
name: 'Credentials',
credentials: {
username: { label: 'Username', type: 'text', placeholder: 'jsmith' },
password: { label: 'Password', type: 'password' },
},
authorize: async (credentials) => {
consol.log('credentials', credentials);
const user = { id: 1, name: 'J Smith', email: 'jsmith#example.com' };
if (user) {
return Promise.resolve(user);
} else {
return Promise.resolve(null);
}
},
}),
],
database: process.env.MONGO_URI,
};
export default (req, res) => NextAuth(req, res, options);
pages/index.js
import { useSession } from 'next-auth/client';
export default function Home() {
const [session, loading] = useSession();
console.log('session', session);
return (
<div className="container">
<main>
{session && <p>Signed in as {session.user.email}</p>}
{!session && (
<p>
Sign in
</p>
)}
</main>
</div>
);
}
pages/_app.js
import { Provider } from 'next-auth/client';
import '../styles.css';
export default ({ Component, pageProps }) => {
const { session } = pageProps;
return (
<Provider options={{ site: process.env.SITE }} session={session}>
<Component {...pageProps} />
</Provider>
);
};
next.config.js
module.exports = {
env: {
MONGO_URI: '...',
SITE: 'http://localhost:3000',
},
};
Any help would be really appreciated.

In your pages/api/auth/[...nextauth].js add:
secret:process.env.SECRET
SECRET must be any string value like this:
SECRET:LlKq6ZtYbr+hTC073mAmAh9/h2HwMfsFo4hrfCx6gts=
Also add it in your vercel env.
Thats it, your problem will be solved.

As mentioned by #Dinesh, my problem was solved by adding a NEXTAUTH_SECRET to both Vercel Environment Variables and to [...nextauth].ts
Local deployment worked without that variable, but vercel deployment needed the secret. In addition to adding the Vercel environment variable, my working [...nextauth].ts looks like:
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET,
}),
],
secret: process.env.NEXTAUTH_SECRET,
callbacks: {
async jwt({ token }) {
token.userRole = "user"
return token
},
},
})

You had a typo under your asyc function consol.log('credentials', credentials);
Fix to console.log('credentials', credentials); and that should solve the problem.
I faced a similar problem and it was because I didn't add any providers array.
In the future, fix any typos or errors within your [...nextauth].js to fix 500 error

Keep in mind NEXTAUTH_URL to be set for yourwebsite.com
process.env.NEXTAUTH_URL=https://yourwebsite.com

How to create a middleware for check role in Nuxtjs

I'm trying to create a middleware for check role of my users.
// middleware/is-admin.js
export default function (context) {
let user = context.store.getters['auth/user']
if ( user.role !== 'admin' ) {
return context.redirect('/errors/403')
}
}
In my .vue file, I'm putting this on:
middleware: [ 'is-admin' ]
It works.
Now, I'd like to check if the user also has another role. So, I create a new middleware:
// middleware/is-consultant.js
export default function (context) {
let user = context.store.getters['auth/user']
if ( user.role !== 'consultant' ) {
return context.redirect('/errors/403')
}
}
And in my .vue file:
middleware: [ 'is-admin', 'is-consultant' ]
Unfortunately, when I do that, if I visit the route with an administrator role, it does not work anymore.
Can you tell me how I can create a middleware that checks multiple roles with Nuxt.js?
Thank you!

The idea is that every page has its authority level. Then in middleware you can compare your current user authority level with the current page authority level, and if it's lower redirect the user. It's very elegant solution that was proposed by Nuxt.js creator. GitHub issue.
<template>
<h1>Only an admin can see this page</h1>
</template>
<script>
export default {
middleware: 'auth',
meta: {
auth: { authority: 2 }
}
}
</script>
Then in your middleware/auth.js:
export default ({ store, route, redirect }) => {
// Check if user is connected first
if (!store.getters['user/user'].isAuthenticated) return redirect('/login')
// Get authorizations for matched routes (with children routes too)
const authorizationLevels = route.meta.map((meta) => {
if (meta.auth && typeof meta.auth.authority !== 'undefined')
return meta.auth.authority
return 0
})
// Get highest authorization level
const highestAuthority = Math.max.apply(null, authorizationLevels)
if (store.getters['user/user'].details.general.authority < highestAuthority) {
return error({
statusCode: 401,
message: 'Du måste vara admin för att besöka denna sidan.'
})
}
}

You can use this feature in Nuxt
export default function ({ $auth, redirect }) {
if (!$auth.hasScope('admin')) {
return redirect('/')
}
}
The scope can be anything you want e.g Consultant, Editor etc.
Check the documentation
Updated
Since you are using Laravel
You can have a role column in your user table
e.g
$table->enum('role', ['subscriber', 'admin', 'editor', 'consultant', 'writer'])->default('subscriber');
Then create a API resource, check the documentation for more
To create a user resource, run this artisan
php artisan make:resource UserResource
Then in your resource, you can have something like this
public function toArray($request)
{
return [
'id' => $this->id,
'name' => $this->name,
'email' => $this->email,
'phone' => $this->phone,
'gender' => $this->gender,
'country' => $this->country,
'avatar' => $this->avatar,
'role' => $this->role,
];
}
Then you can import it to your controller like this
use App\Http\Resources\UserResource;
You can get the resource like this
$userdata = new UserResource(User::find(auth()->user()->id));
return response()->json(array(
'user' => $userdata,
));
In Nuxt
To do authentication in Nuxt
Install nuxt auth and axios
Using YARN : yarn add #nuxtjs/auth #nuxtjs/axios
Or using NPM: npm install #nuxtjs/auth #nuxtjs/axios
Then register them in your nuxtconfig.js
modules: [
'#nuxtjs/axios',
'#nuxtjs/auth',
],
In your nuxtconfig.js, add this also
axios: {
baseURL: 'http://127.0.0.1:8000/api'
},
auth: {
strategies: {
local: {
endpoints: {
login: { url: '/login', method: 'post', propertyName: 'access_token' },
logout: { url: '/logout', method: 'post' },
user: { url: '/user', method: 'get', propertyName: false }
},
tokenRequired: true,
tokenType: 'Bearer',
globalToken: true
// autoFetchUser: true
}
}
}
The URL been the endpoints
Check Documentation for more
To restrict certain pages in Nuxt to Specific User.
> Create a middlweare e.g isadmin.js
Then add this
export default function ({ $auth, redirect }) {
if (!$auth.hasScope('admin')) {
return redirect('/')
}
}
Then go to the Page, add the middleware
export default {
middleware: 'isadmin'