oauth with google and vue

Step 1: Set up a new project in the Google Cloud Console

• Go to the Google Cloud Console (https://console.cloud.google.com/).
• Create a new project.
• Enable the "Google+ API" for your project.

Step 2: Create OAuth 2.0 credentials

• In the Cloud Console, navigate to the "Credentials" page.
• Click on "Create Credentials" and choose "OAuth client ID."
• Select "Web application" as the application type.
• Add the authorized redirect URI for your Go application (e.g., http://localhost:3000/auth/callback).
• Note down the generated client ID and client secret.

Step 3: Set up Go server for OAuth authentication

• Use a Go package like golang.org/x/oauth2 to handle OAuth2 authentication.
• Configure the OAuth2 endpoint with the client ID, client secret, and redirect URL.
• Define the OAuth2 scopes you need (e.g., "https://www.googleapis.com/auth/userinfo.email").
• Set up a handler to initiate the OAuth2 flow and handle the callback.

package main

import (
    "net/http"
    "golang.org/x/oauth2"
    "golang.org/x/oauth2/google"
)

var (
    googleOauthConfig = &oauth2.Config{
        RedirectURL:  "http://localhost:3000/auth/callback",
        ClientID:     "YOUR_CLIENT_ID",
        ClientSecret: "YOUR_CLIENT_SECRET",
        Scopes:       []string{"https://www.googleapis.com/auth/userinfo.email"},
        Endpoint:     google.Endpoint,
    }
)

func handleGoogleLogin(w http.ResponseWriter, r *http.Request) {
    url := googleOauthConfig.AuthCodeURL("state")
    http.Redirect(w, r, url, http.StatusTemporaryRedirect)
}

func handleGoogleCallback(w http.ResponseWriter, r *http.Request) {
    // Handle the callback by exchanging the authorization code for a token
    // Use the token to make authenticated API requests
    // ...
}

func main() {
    http.HandleFunc("/auth/google/login", handleGoogleLogin)
    http.HandleFunc("/auth/google/callback", handleGoogleCallback)
    http.ListenAndServe(":3000", nil)
}

Step 4: Set up Vue.js frontend

• Use a Vue.js project and set up a login button that redirects to the Go server for authentication.
• Handle the callback from the Go server and store the received token.

<!-- Vue component template -->
<template>
  <div>
    <button @click="loginWithGoogle">Login with Google</button>
  </div>
</template>

<script>
export default {
  methods: {
    loginWithGoogle() {
      window.location.href = "http://localhost:3000/auth/google/login";
    },
  },
};
</script>

Step 5: Complete Go server callback handling

• Complete the handleGoogleCallback function to exchange the authorization code for a token.
• Use the token to make authenticated requests to Google APIs or your backend.

func handleGoogleCallback(w http.ResponseWriter, r *http.Request) {
    code := r.FormValue("code")
    token, err := googleOauthConfig.Exchange(r.Context(), code)
    if err != nil {
        http.Error(w, "Failed to exchange token", http.StatusInternalServerError)
        return
    }

    // Use the token to make authenticated API requests
    // ...

    // Optionally, redirect the user to a success page
    http.Redirect(w, r, "/success", http.StatusSeeOther)
}

Now, your Go server and Vue.js frontend are set up for OAuth authentication with Google. Users can log in through the Vue.js frontend, and the Go server handles the authentication flow with Google.