Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

175
Views
vue3) Google Login Api (GSI)'s redirect mode can't find http://localhost:3000

I want to adjust google login api(GSI) redirect mode. If api complecated, redirect the url to "http://localhost:3000/oauth", post credential token to backend and redirect to "http://localhost:3000".

Here is my code.

      <div
        id="g_id_onload"
        :data-client_id="googleClientId"
        data-ux_mode="redirect"
        data-auto_prompt="false"
        :data-callback="getGoogleLoginCallback"
        style="z-index: 100000000000000000"
      ></div>
      <div class="g_id_signin"></div>

After the page redirected and i clicked my account, i got the error http://localhost:3000 is enter image description here

How can i get page?

I can't find anything method to solve problem

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

From the docs you can can see that if you doesn't provide data-login_uri attribute, google will redirect to same page where you clicked the login button, if you are planing to post the credintial JWT after login to http://localhost:3000/oauth then the html must be like this

      <div
        id="g_id_onload"
        :data-client_id="googleClientId"
        data-ux_mode="redirect"
        data-auto_prompt="false"
        data-login_uri="http://localhost:3000/oauth"
        :data-callback="getGoogleLoginCallback"
        style="z-index: 100000000000000000"
      ></div>
      <div class="g_id_signin"></div>

I am not recommending this way of using html in your Vue app, this may not work if the component containing this html is mounted after the library is loaded

Instead Use renderButton function

Instead you can use google.accounts.id.renderButton function to dynamically create a Login Button.

Or Use a Plugin Instead

You can easily do the same using this Vue 3 plugin vue3-google-login which I recently created for easily integrating Login With Google feature in your Vue 3 application, all you need to do is initialise the plugin in main.js with your client id then use the component GoogleLogin like this

<script setup>
const idConfiguration = {
      login_uri:'http://localhost:3000/oauth',
      ux_mode:'redirect'
    }
</script>

<template>
    <GoogleLogin 
    :idConfiguration="idConfiguration"
    />
</template>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!