Theo's Typesafe Cult•2y ago

Question about next auth.

Hey all, The stack and full stack development in javascript in general is new for me. I finding my way around while using the documentation. But I was wondering what the best way/ implementation should be to use next auth to call a query from another API. Old API that is still in use for verification. I can make this call with the correct credentials . Afterwards i want to check in the same function for the email and password via a trpc query in a table in my database and return the result (unique user with that email and password) as my user in the session. But i'm kinda stuck on the big picture here i guess. Thanks in advance. And if this is not appropriate to ask in the discord. Feel free to delete this.

10 Replies

VIIKKKOP•2y ago

    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: "email", type: "text", placeholder: "jsmith" },
        password: { label: "password", type: "text", }
      },
      async authorize(credentials, req) {
        const res = await fetch("test/login", {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: { "Content-Type": "application/json" }
        });
    
        const response = await res.json();
    
        if (res.ok && response.token) {
          // If the API call was successful and the token exists
          const user = {
            id: response.token, // Provide a unique identifier for the user // Extract relevant user data from the API response
            email: credentials.username, // Use the provided email as the user's email
            password: credentials.password // Add any other relevant user data from the API response
          };
          const check = await CompanyEmployeeRouter.Authorize(user);

          console.log(check);

        }

    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: "email", type: "text", placeholder: "jsmith" },
        password: { label: "password", type: "text", }
      },
      async authorize(credentials, req) {
        const res = await fetch("test/login", {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: { "Content-Type": "application/json" }
        });
    
        const response = await res.json();
    
        if (res.ok && response.token) {
          // If the API call was successful and the token exists
          const user = {
            id: response.token, // Provide a unique identifier for the user // Extract relevant user data from the API response
            email: credentials.username, // Use the provided email as the user's email
            password: credentials.password // Add any other relevant user data from the API response
          };
          const check = await CompanyEmployeeRouter.Authorize(user);

          console.log(check);

        }

` I guess this won't work (pseudocode) ?

Sebastian•2y ago

The thing you explicitly outlined in the pseudocode would not work. You imported a specific router and tried to access a procedure on it. When tRPC initializes does a lot of things, constructs the context and other configurations ( especially if you have built it using create-t3-app ) which it then uses in the other underlying routers which you then compose in the appRouter. What you want to do is achievable, but you will have to import the appRouter and create a new instance by calling .createCaller({}) on it. It will give you a new tRPC router which you can use to authorize the user. Your code might look something like this:

CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: "email", type: "text", placeholder: "jsmith" },
        password: { label: "password", type: "text", }
      },
      async authorize(credentials, req) {
        const res = await fetch("test/login", {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: { "Content-Type": "application/json" }
        });
    
        const response = await res.json();
    
        if (res.ok && response.token) {
          // If the API call was successful and the token exists
          const user = {
            id: response.token, // Provide a unique identifier for the user // Extract relevant user data from the API response
            email: credentials.username, // Use the provided email as the user's email
            password: credentials.password // Add any other relevant user data from the API response
          };
          // initialize the new tRPC router only if the other steps where successfull
          const trpcRouter = appRouter.createCaller({});
          const check = await trpcRouter.CompanyEmployeeRouter.Authorize(user);

          console.log(check);

        }

CredentialsProvider({
      name: 'Credentials',
      credentials: {
        username: { label: "email", type: "text", placeholder: "jsmith" },
        password: { label: "password", type: "text", }
      },
      async authorize(credentials, req) {
        const res = await fetch("test/login", {
          method: 'POST',
          body: JSON.stringify(credentials),
          headers: { "Content-Type": "application/json" }
        });
    
        const response = await res.json();
    
        if (res.ok && response.token) {
          // If the API call was successful and the token exists
          const user = {
            id: response.token, // Provide a unique identifier for the user // Extract relevant user data from the API response
            email: credentials.username, // Use the provided email as the user's email
            password: credentials.password // Add any other relevant user data from the API response
          };
          // initialize the new tRPC router only if the other steps where successfull
          const trpcRouter = appRouter.createCaller({});
          const check = await trpcRouter.CompanyEmployeeRouter.Authorize(user);

          console.log(check);

        }

Sebastian•2y ago

you can also reffer to the official documentation for more details: https://trpc.io/docs/server/server-side-calls

Server Side Calls | tRPC

You may need to call your procedure(s) directly from the same server they're hosted in, router.createCaller() can be used to achieve this.

VIIKKKOP•2y ago

Hmm. Still stuck on it. But thanks for the info!

Sebastian•2y ago

what seems to not work

VIIKKKOP•2y ago

I think i might be confused on how to interact with the session from there. Should it just work when I return an user? Or what is the next step? If you are willing I would love to share some more details in private in about an hour

Sebastian•2y ago

sure, feel free to pm me

Maj•2y ago

yo is credentails provider like a login form? just wondering never used credentials provider only other providers like google , discord etc

VIIKKKOP•2y ago

yes

Maj•2y ago

sick

Gaming

Programming

Question about next auth.