Develop a sign-in button using Xero integration for a Next.js application

I am currently working on integrating Xero into our application using Next.js for the client-side functionality. I have followed the documentation to add a Xero authentication script and button with the necessary classes here

Below is the code snippet:

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
          <meta name="xero-client-id" content="clientID" />
        <meta name="xero-scopes" content="openid,profile,email" />
        <meta name="xero-redirect-uri" content="https://localhost:5001/Authorization/Callback" />
        <script src='https://edge.xero.com/platform/sso/xero-sso.js' defer></script> 
      </Head>
      <main >
        <div >
          <h1>Login page</h1>
          <div>
         <span data-xero-sso data-label="Sign In with Xero"></span> 
          </div>
        </div>
      </main>
    </>
  )
}

However, I encountered an error as shown in this screenshot: https://i.sstatic.net/wiHzu.png

I would appreciate any assistance in resolving this issue.

javascriptnext.jsxero-api

Answer №1

The Xero identity server is not compatible with single page applications like those created using React.

Answer №2

interface GoogleSignInButtonProps {
  signInUrl: string;
  label: string;
}

const GoogleSignInButtonComponent: React.FC<GoogleSignInButtonProps> = ({
  signInUrl,
  label,
}) => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://google.com/signin/google-sso.js';
    script.defer = true;
    document.body.appendChild(script);
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <span
      data-google-sso
      data-href={signInUrl}
      data-label={label}
      data-size="large"
      data-height="50"
      data-theme="dark"
      data-border-radius="10"
    ></span>
  );
};

export default GoogleSignInButtonComponent;

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

What are some inquiries regarding using `Date.now()` to initiate `useState`?

Utilizing an API to fetch the most recent posts from Firestore has been a crucial aspect of my project. The structure of the API function is outlined below: function loadFeedPosts( createdAtMax, limit ) { return db .collection("posts") .orde ...

javascriptreactjsreact-hooks

Trigger a function from a Bootstrap modal

Here is a preview of my HTML code : <form action="form2_action.php" method="post"> <table> <tr> <td>First Name </td> <td>:</td> <td><input type="text" id="f ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for displaying dynamic content in VueJS?

I'm currently working on an app that allows users to choose which type of vuetify element they want to display on the page. There are 4 options available for selection. My goal is to render the corresponding vuetify component when a user clicks on the ...

javascriptvue.jsvuetify.js

What could be causing my button to not display within the li element?

I need to insert a delete button (deleteButton) into an <li></li> element that is created and added before the <ol> Here is my code: let eventList = []; const inputBox = document.querySelector('.input-field'); const submit = ...

javascripthtmlhtml-lists

Utilize the browser console to interact with AngularJS components such as scope or directives

What is the method for accessing Angularjs elements in a web browser? $scope, Controller, Directive, $scope.function ...

javascriptjqueryangularjsdom

Trying out $window.location.href in Karma with Angular testing

I'm currently working on properly injecting the $window service into my Angular controller, and then testing to ensure that it redirects correctly. However, I'm running into an issue where I'm getting an error message that says undefined is ...

javascriptangularjsunit-testingmocha.jskarma-runner

Avoiding the storage of POST data in JSON format

Here is some code I am working with: var jsonString = "some string of json"; $.post('proxy.php', { data : jsonString }, function(response) { var print = response; alert(print); }); And this P ...

phpjavascriptajaxcross-domain

deleting the selected list item with JavaScript

Currently, I am tackling a todo list project but facing a challenge in finding a vanilla Javascript solution to remove a list item once it has been clicked. Adding user input as list items was relatively simple, but I have come to realize that this specif ...

javascripthtmlcss

Increase the div id using jQuery

I've got this code snippet here and, oh boy, am I a newbie. How can I increase the number in the div using a jQuery script? if($res >= 1){ $i=1; while($row = mysqli_fetch_array($qry)){ echo "<div clas ...

javascriptjqueryhtmlcss

Creating layers of object declarations

Looking for assistance on the code snippet below. type Item = { id: number; size: number; } type Example = { name: string; items: [ Item ]; } var obj: Example = { name: "test", items: [ { i ...

javascriptreactjstypescriptreact-native

Is there a notable reduction in performance due to the use of the second

Is the presence of the second optional chaining causing any negative impact? let flag = somePotentialNullObj?.someNumProp > 0 && somePotentialNullObj?.someOtherProp; The second optional chaining is unnecessary as it works the same without it: ...

javascripttypescript

Installing external Javascript libraries on Parse cloud code can be done by following these steps

Currently, I have integrated these JavaScript libraries into my Parse cloud code. var request = require('request'); var fs = require('fs'); var Twit = require('twit'); However, the code refuses to compile if these libraries ...

javascriptparse-platformrequesttwitter-oauthparse-cloud-code

Obtain the response body in Nest JS middleware

Currently, I am working on developing logging middleware for my project. My main goal is to log the response body specifically in 500 responses. However, I have encountered an issue where the response body is not present in the Response object when using a ...

javascriptnode.jsexpressnestjsmiddleware

What is the method for retrieving values from an object using keys that are subject to change?

Here is the code snippet I am working with: bodyLength.forEach((el, i) => { console.log(`${values.bodyTitleEn2 + i.toString()}`); body.push({ title: [ { key: 'en', value: values.bodyTi ...

javascriptarraysobject

Retrieve a string value in Next.JS without using quotation marks

Using .send rather than .json solved the problem, thank you I have an API in next.js and I need a response without Quote Marks. Currently, the response in the browser includes "value", but I only want value. This is my current endpoint: export ...

javascriptnode.jsnext.js

Retrieving document attributes from a Mongoose Model with the help of Typescript

Incorporating Typescript with Mongoose, my aim is to retrieve properties from a Model. Taking the illustrated UserModel as an example import mongoose, { Schema } from 'mongoose'; const userSchema: Schema = new mongoose.Schema({ _id: mongoos ...

javascriptnode.jsmongodbtypescriptmongoose

Utilize JSON to create a dictionary populated with objects following a complex grouping operation

I am faced with a JSON query that contains the Date, Value, Country, and Number fields. My goal is to create two separate JSON dictionaries based on unique dates (there will be two of them). The desired output can be seen in the code snippet below along wi ...

javascript

Ways to continuously reduce the value in Mongo until it reaches zero

singleObj = await Objects.findByIdAndUpdate({ _id: req.body.id, }, { $inc: { 'total_obj': -1, 'total_stuff': 1 }, }, { new: true }) Whenever the user clicks a button, we decrement the value of 'total_obj' by one. It's im ...

javascriptmongodb

JavaScript Time Lag

Every 100 milliseconds, the PS.Tick() function is called to execute the AI function of NPCs and make them move: PS.Tick = function () { "use strict"; for (NPCid = 0; NPCid < NPCnumber; NPCid++) { NPCAI(NPCid); }; }; However, I wanted the NPCs to m ...

javascript

Modifying the color of an individual object in THREE.js: Step-by-step guide

I am currently working on editing a program that uses Three.js and Tween.js. Despite my efforts to find a solution both here and online, I have not been successful. The program involves creating multiple objects (cones) using THREE.Mesh, with a script that ...

javascriptthree.jstween.js