Add support for CSP nonce on GSI script & inline styles (#230)

* fix(useLoadGsiScript): assign nonce to GSI script tag

* fix(GoogleOAuthProvider): adds nonce to props

* docs: add nonce to README

* fix(useLoadGsiScript): adds nonce to dependency array

* chore: add changeset

* docs: fix typo on README

Author: danfsd

.changeset/old-rats-unite.md

@@ -0,0 +1,5 @@
+---
+'@react-oauth/google': patch
+---
+
+Add minor CSP support by accepting "nonce" and propagating it to GSI script & inline style

README.md

@@ -193,6 +193,7 @@ const hasAccess = hasGrantedAnyScopeGoogle(
 | Required | Prop                | Type       | Description                                                                 |
 | :------: | ------------------- | ---------- | --------------------------------------------------------------------------- |
 |    ✓     | clientId            | `string`   | [**Google API client ID**](https://console.cloud.google.com/apis/dashboard) |
+|          | nonce               | `string`   | Nonce applied to GSI script tag. Propagates to GSI's inline style tag       |
 |          | onScriptLoadSuccess | `function` | Callback fires on load gsi script success                                   |
 |          | onScriptLoadError   | `function` | Callback fires on load gsi script failure                                   |
 

packages/@react-oauth/google/src/GoogleOAuthProvider.tsx

@@ -18,11 +18,13 @@ interface GoogleOAuthProviderProps extends UseLoadGsiScriptOptions {
 
 export default function GoogleOAuthProvider({
   clientId,
+  nonce,
   onScriptLoadSuccess,
   onScriptLoadError,
   children,
 }: GoogleOAuthProviderProps) {
   const scriptLoadedSuccessfully = useLoadGsiScript({
+    nonce,
     onScriptLoadSuccess,
     onScriptLoadError,
   });

packages/@react-oauth/google/src/hooks/useLoadGsiScript.ts

@@ -1,6 +1,10 @@
 import { useState, useEffect, useRef } from 'react';
 
 export interface UseLoadGsiScriptOptions {
+  /**
+   * Nonce applied to GSI script tag. Propagates to GSI's inline style tag
+   */
+  nonce?: string;
   /**
    * Callback fires on load [gsi](https://accounts.google.com/gsi/client) script success
    */
@@ -14,7 +18,7 @@ export interface UseLoadGsiScriptOptions {
 export default function useLoadGsiScript(
   options: UseLoadGsiScriptOptions = {},
 ): boolean {
-  const { onScriptLoadSuccess, onScriptLoadError } = options;
+  const { nonce, onScriptLoadSuccess, onScriptLoadError } = options;
 
   const [scriptLoadedSuccessfully, setScriptLoadedSuccessfully] =
     useState(false);
@@ -30,6 +34,7 @@ export default function useLoadGsiScript(
     scriptTag.src = 'https://accounts.google.com/gsi/client';
     scriptTag.async = true;
     scriptTag.defer = true;
+    scriptTag.nonce = nonce;
     scriptTag.onload = () => {
       setScriptLoadedSuccessfully(true);
       onScriptLoadSuccessRef.current?.();
@@ -44,7 +49,7 @@ export default function useLoadGsiScript(
     return () => {
       document.body.removeChild(scriptTag);
     };
-  }, []);
+  }, [nonce]);
 
   return scriptLoadedSuccessfully;
 }