google

Authenticate with Google

Register a Google account

1. Go to the Google Cloud Console.
2. Create a new project.
3. Go to the "APIs & Services" -> "Credentials" section.
4. Click the "Create credentials" -> "OAuth client ID".
5. Choose "Web application" as the application type.
6. Add the authorized redirect URIs. For the local environment, it should be http://localhost:8001/auth/google/callback.
7. Copy the client ID and secret to the .env file.

   AUTH_GOOGLE_CLIENT_ID=...apps.googleusercontent.com
   AUTH_GOOGLE_SECRET=

1. Encode the client secret with the dotenvx CLI tool to the .env.dev.

dotenvx set AUTH_GOOGLE_SECRET "GOCSPX..." -f .env.dev

1. In the Google Cloud Console go to the "API & Services" -> "OAuth consent screen" -> "Audience" and add the email address.
2. On your frontend part create a route /auth/google that generates the secret and asks Google for authentication:

    function generateCodeVerifier(length = 128) {
    const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~';
    let result = '';
    for (let i = 0; i < length; i++) {
        result += charset.charAt(Math.floor(Math.random() * charset.length));
    }
    return result;
}

async function generateCodeChallenge(codeVerifier) {
    const data = new TextEncoder().encode(codeVerifier);
    const digest = await crypto.subtle.digest('SHA-256', data);
    return btoa(String.fromCharCode(...new Uint8Array(digest)))
        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
}

const getCodeBtn = document.getElementById('get-code-btn');
getCodeBtn.addEventListener('click', async () => {
    const codeVerifier = generateCodeVerifier();
    const codeChallenge = await generateCodeChallenge(codeVerifier);

    localStorage.setItem("code_verifier", codeVerifier);

    const params = new URLSearchParams({
        client_id: '{{ClientID}}',
        redirect_uri: '{{FrontedHost}}/auth/google/callback',
        response_type: 'code',
        scope: 'openid profile email',
        code_challenge: codeChallenge,
        code_challenge_method: 'S256',
    });

    window.location = `https://accounts.google.com/o/oauth2/v2/auth?${params.toString()}`;
});

1. Create a callback route /auth/google/callback that will handle the response from Google and send gained code to backend:

const code = params.get('code');
const verifier = localStorage.getItem("code_verifier");

async function getAccessToken(code) {

    const response = await fetch('{{BackendHost}}/graphql', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            query: `mutation {
        registerViaGoogle(input: {code: "${code}", verifier: "${verifier}"}) {
          accessToken
        }
      }`,
            variables: {}
        })
    });

    const result = await response.json();

    if (result.data && result.data.registerViaGoogle) {
        return result.data.registerViaGoogle.accessToken;
    } else {
        throw Error('Failed to retrieve access token: ' + JSON.stringify(result.errors || result));
    }
}

1. Use access token to gain access to the guarded queries and mutation.

Examples of the token exchange you can find in the DEMO.

Query:

mutation {
    registerViaGoogle(input: {
        code: "4/0AY0e-g7",
        verifier: "v3r1f13r"
    }) {
        accessToken
    }
}

Errors: