Users authentications and authorizations

At a glance

The community members are discussing how to implement user authentication and authorization in a GraphQL application built with WebStudio. They are exploring the use of the "wp-graphql-headless-login" plugin, setting up access control, and creating sign-in and sign-up forms using GraphQL mutations. The community members are also trying to figure out how to use the "viewer" query to retrieve user profile information after authentication. However, they are still facing challenges and are seeking guidance from the WebStudio team to clarify their requirements. Some community members have also mentioned exploring other solutions like Clerk.com for user authentication.

Useful resources

MMatthieu

Hey every body
Any body has already done this kind of application with graphql in webstudio ?
Depending on user permissions I want to allow editing profil, view restricted contents, etc.
in this channel I was asking if there is a way to add "credentials: include" to the query.
https://discord.com/channels/955905230107738152/1277638588309442600

Any idea ? 🙏

12 comments

MMatthieu

How to deal with user permissions in graphql query

MMatthieu

I give you further information about my research :
I add "wp-graphql-headless-login" plugin.

As you can see on screenshot :

I use password provider ;
I check Add Access-Control-Allow-Credentials and Add Site URL to Access-Control-Allow-Origin
I add an additional domain for testing.

Following this tips https://discord.com/channels/955905230107738152/1234117082141167677
I start from supase-authenticate template, and create a sign in sign up form using login and userRegistration mutation with graphql.
Graphql returns the user authToken I store in session storage.

At this point, I want to use viewer query to allow user to get is profil information.
I'm completely stuck.

How can We do this kind of queries @Webstudio Team ?

MMatthieu

my queries

mutation signUp($username: String = "", $email: String = "", $password: String = "") {
  registerUser(input: {username: $username, email: $email, password: $password}) {
    user {
      username
      auth {
        authToken
      }
    }
  }
}

mutation login($password: String = "", $username: String = "") {
  login(
    input: {provider: PASSWORD, credentials: {password: $password, username: $username}}
  ) {
    user {
      auth {
        authToken
      }
      username
    }
  }
}

query viewer {
  viewer {
    username
  }
}

MMatthieu

headless login setup

Attachment

Capture_decran_2024-09-27_a_10.10.56.png

MMatthieu

and the script for sign in/up

MMatthieu

Users authentications and authorizations

DDesignzByNicholas

Hi Mathieu, Hope all is well. Just wondering if you were successful with the user authentication process? As I am looking at doing something similar... Just wanted to see what you experience was like... Thanks for your feedback, Cheer, Nick

MMatthieu

Hi @DesignzByNicholas Unfortunaltly, not yet
Webstudio team askes me to explain exactly what I want to achieve. It wasn't clear to them.

You also need to authentificate users in a wordpress integration ?
Maybe we could work together on a shared builder.

YYann

Hi @Matthieu ,
Did you find a solution for auth ?
I too was wondering if that could be done in WebStudio!
I have no experience with remote authentification, and I guess it's not an easy beast to master !

DDesignzByNicholas

@Matthieu & @Yann - Not wordpress, but a headless cms using a graphQL API. I am working on the implementation now... will let you guys know how it goes...

BBatman-sama

has anyone created content like a video or article, on how to impliment user authentication? I'm trying to create users for my sites and display relative information

MMilan Boisgard | Uncode School

I have to make a video on this, but I tried Clerk.com and it's working fine!

Add a reply

Join the Webstudio community

Users authentications and authorizations