Frontend utilizing the Next-auth Github Provider for Profile Consumption

After following the official documentation for implementing SSO with the Next-auth Github provider in my App, I encountered an issue where the Client API documentation suggested using useSession() to retrieve session information, but it was not returning the Github username, which is essential for my needs. To address this, I decided to override the profile response as shown in the code snippet below. The profile information is being logged via Terminal output.

I now need to figure out how to utilize the profile data in the Frontend of my application.

Thank you!

export default NextAuth({
  providers: [
    GithubProvider({
      clientId: process.env.CLIENT_ID,
      clientSecret: process.env.CLIENT_SECRET,
      async profile(profile: GithubProfile) {
        console.log('profile', profile)
        return {
          id: profile.id.toString(),
          name: profile.name,
          userName: profile.login,
          email: profile.email,
          image: profile.avatar_url,
        }
      },
    }),
  ],
})

Answer №1

If you're looking to retrieve profile information on the client side, here are a few approaches you can take:

  1. Retrieve data during server-side rendering (SSR) and send it to the client
  2. Send an API request from the client and set up an API handler in the /api/ path to handle the response. Use client_secret only on the backend to securely send profile data to the client.
  3. (Recommended) -> Develop an API handler to store the data in a cookie using JWT method. This approach is secure and efficient for the server as it eliminates the need to fetch data every time. Additionally, your sensitive data remains confidential :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using jQuery to add a class to an input option if its value exists in an array

Looking for a way to dynamically add a class to select option values by comparing them with an array received from an ajax call. HTML <select id="my_id"> <option value="1">1</option> <option value="2">2</option> ...

JS/Apps Script: Passing object and its keys as function parameters

When working with Google Apps Script, I have a specific task that involves looping through data and writing only certain keys to a sheet. I want this looping operation to be done in a separate function rather than directly in the main function, as it will ...

NodeJS/express: server became unresponsive after running for some time

Initially, my service using express and webpack ran smoothly. However, I started encountering an issue where the server would hang with no message code being received, as shown in the server message screenshot (server message screenshot). This problem kept ...

JavaScript: Utilize MooTools to extract a string containing a specific class and then pass it through a parent function

I am facing a major issue and struggling to find a solution for it. My problem involves returning values, mostly strings, that I can utilize in various contexts. For instance, I need to verify whether something is 0 or 1 in an if/else statement, or insert ...

How can I prevent right-clicking with Ctrl+LeftMouseClick in Firefox on MacOS?

I'm looking to implement a shortcut using Ctrl+LeftMouseClick in my React project. It functions perfectly on Chrome on my Mac, but in Firefox the shortcut initiates a right mouse click (event.button = 2). I believe this may be due to MacOS's Rig ...

Change the name of the state in Vue mapState

I have a specific situation in my computed where I need to track two different "loading" states. Is there a method to include an alias for the second state using this syntax? computed: { ...mapState('barcodes', ['barcodes', ' ...

Discovering the secrets of document property ranges in MarkLogic

<?xml version="1.0" encoding="UTF-8"?> <prop:properties xmlns:prop="http://marklogic.com/xdmp/property"> <publicationDate type="string" xmlns="http://marklogic.com/xdmp/json/basic">2015-03-30</publicationDate> <identifier typ ...

When initiating a new process with exec() in nodejs, is it executed concurrently with the current process? How does nodejs manage this situation?

Given that nodejs operates on a single thread, how exactly does it go about creating and managing new processes? const exec = require('child_process').exec; exec('my.bat', (err, stdout, stderr) => { if (err) { console.er ...

React Weather App: difficulties entering specific latitude and longitude for API requests

I have successfully developed an app that displays the eight-day weather forecast for Los Angeles. My next objective is to modify the longitude and latitude in the API request. To achieve this, I added two input fields where users can enter long/lat values ...

Properly maintaining child processes created with child_process.spawn() in node.js

Check out this example code: #!/usr/bin/env node "use strict"; var child_process = require('child_process'); var x = child_process.spawn('sleep', [100],); throw new Error("failure"); This code spawns a child process and immediately ...

The proper method for organizing a nested array object - an obstacle arises when attempting to sort the array

I have a collection of data fetched from Web API 2.2 stored in an Angular array as objects. Each object represents a Client and includes properties like name, surname, and a collection of contracts assigned to that client. Here is the interface definition ...

Transitioning React Hover Navbar Design

I'm currently revamping a click-to-open navbar into a hover bar for a new project. I have successfully implemented the onMouseEnter and onMouseLeave functions, allowing the navbar to open and close on mouse hover. However, I am facing an issue with ad ...

Filtering Key Presses in Quasar: A Comprehensive Guide

Seeking Assistance I am looking to integrate an "Arabic keyboard input filtering" using the onkeyup and onkeypress events similar to the example provided in this link. <input type="text" name="searchBox" value="" placeholder="ب ...

Unfortunately, the utilization of an import statement outside a module is restricted when working with Electron

Is there a solution to the well-known problem of encountering the error message "Cannot use import statement outside a module" when working with an Electron-React-Typescript application? //const { app, BrowserWindow } = require('electron'); impor ...

Discover the Magic Trick: Automatically Dismissing Alerts with Twitter Bootstrap

I'm currently utilizing the amazing Twitter Bootstrap CSS framework for my project. When it comes to displaying messages to users, I am using the alerts JavaScript JS and CSS. For those curious, you can find more information about it here: http://get ...

The Null object within localStorage is identified as a String data type

As someone transitioning from Java development to Javascript, I am seeking clarification on a particular issue. In my project, I am utilizing localStorage to keep track of the user's token in the browser. localStorage.token = 'xxx' When a ...

Unable to display imported image in React application

I have a component where I want to display an image: import React from 'react' import background from '../media/content-background.jpg' function ContentPage(){ return( <div id="content-page"> < ...

Utilizing ionic-scroll for seamless movement and scrolling of a canvas element

I have set up a canvas element with a large image and I want to enable dragging using ionic-scroll. Following the provided example: <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; h ...

Discovering the magic of nesting maps in React-Native without the need for

I am currently developing a react-native app that retrieves its data through an API. I am working on implementing a new feature where the information is grouped by date. The JSON data structure sent by the API looks like this: { "channel_count" ...

Something is amiss with the PHP email validation functionality

I have been facing issues with the functionality of my form that uses radio buttons to display textboxes. I implemented a PHP script for email validation and redirection upon completion, but it doesn't seem to be functioning correctly. The error messa ...