Merge pull request #409 from KeeganBeuthin/update-react-sdk-references

first revision of updated react sdk refs

Author: clairekinde11

src/content/docs/authenticate/custom-configurations/custom-authentication-pages.mdx

@@ -78,15 +78,13 @@ There are different steps depending on the authentication method you use. Update
 
 ### Social sign in
 
-Add the `connection_id` to the auth url. Here is an example using React:
+Add the `connectionId` to the auth url. Here is an example using React:
 
 ```jsx
 <button
   onClick={() =>
     login({
-      authUrlParams: {
-        connection_id: "conn_6a95dec504d34dc286dc80e8df9f6099"
-      }
+      connectionId: "conn_6a95dec504d34dc286dc80e8df9f6099"
     })
   }
 >
@@ -98,7 +96,7 @@ You can now test if it works by signing in to your project or app.
 
 ### Email sign in
 
-Add the `connection_id` and `login_hint` params to the auth url.
+Add the `connectionId` and `loginHint` params to the auth url.
 
 The `login_hint` enables you to pre-populate the email for the user, skipping the step where they have to enter their identity/email. It also tells us where to send their one time password for passwordless verification.
 
@@ -108,10 +106,8 @@ Here is an example using React.
 <button
     onClick={() =>
       login({
-        authUrlParams: {
-            connection_id: "conn_e5f80aa5258e4685bf629b38003ee954"
-            login_hint: "[email protected]"
-         }
+        connectionId: "conn_e5f80aa5258e4685bf629b38003ee954",
+        loginHint: "[email protected]"
       })
     }
 >
@@ -123,22 +119,20 @@ You can now test if it works by signing in to your project or app.
 
 ### Phone sign in
 
-Add `connection_id` and `login_hint` params to the auth url.
+Add `connectionId` and `loginHint` params to the auth url.
 
-The `login_hint` enables you to pre-populate the phone for the user, skipping the step where they have to enter their phone number. It also tells us where to send their one time password for passwordless verification.
+The `loginHint` enables you to pre-populate the phone for the user, skipping the step where they have to enter their phone number. It also tells us where to send their one time password for passwordless verification.
 
-The `login_hint` needs to be in one of these formats `phone:<intl_number>:<country_code>` or `phone:<+intl_number>:<country_code>`. The ‘+’ symbol is optional, as long as the country code is included.
+The `loginHint` needs to be in one of these formats `phone:<intl_number>:<country_code>` or `phone:<+intl_number>:<country_code>`. The ‘+’ symbol is optional, as long as the country code is included.
 
 Here is an example using React:
 
 ```jsx
 <button
     onClick={() =>
       login({
-        authUrlParams: {
-          connection_id: "conn_e1d49977648149a2a32fde844f1ff9e5"
-          login_hint: "phone:+61466043123:au"
-        }
+          connectionId: "conn_e1d49977648149a2a32fde844f1ff9e5"
+          loginHint: "phone:+61466043123:au"
       })
     }
 >
@@ -150,15 +144,13 @@ You can now test if it works by signing in to your project or app.
 
 ### Enterprise sign in (Entra ID or SAML)
 
-Add the `connection_id` to the auth url. This takes the user directly to the enterprise authentication process. Here is an example using React:
+Add the `connectionId` to the auth url. This takes the user directly to the enterprise authentication process. Here is an example using React:
 
 ```jsx
 <button
   onClick={() =>
     login({
-      authUrlParams: {
-        connection_id: "conn_6a95dec504d34dc286dc80e8df9f6099"
-      }
+      connectionId: "conn_6a95dec504d34dc286dc80e8df9f6099"
     })
   }
 >

src/content/docs/authenticate/manage-authentication/navigate-between-organizations.mdx

@@ -68,9 +68,9 @@ In this example, we’ve also included a check to see if this is the current org
 const {getClaim, getOrganization} = useKindeAuth();
 
 <ul>
-  {getClaim("organizations", "id_token").value.map((item) => (
+  {getClaim("organizations", "idToken").value.map((item) => (
     <li key={item.id}>
-      <button onClick={() => login({org_code: item.id})} type="button">
+      <button onClick={() => login({orgCode: item.id})} type="button">
         {item.name}
         {getOrganization().orgCode === item.id ? " (Current)" : null}
       </button>

src/content/docs/build/applications/authenticating-spa.mdx

@@ -30,11 +30,11 @@ This application type does not have a client secret as authentication takes plac
 4. This sample is from a React application, but it will be very similar for any frontend technology.
 
    ```jsx
-   const {getToken} = useKindeAuth();
+   const { getAccessToken } = useKindeAuth();
 
    const fetchData = async () => {
      try {
-       const accessToken = await getToken();
+       const accessToken = await getAccessToken();
        const res = await fetch(`<your_api_endpoint>`, {
          headers: {
            Authorization: `Bearer ${accessToken}`
@@ -52,7 +52,7 @@ This application type does not have a client secret as authentication takes plac
 
 You do not need to set up a back-end application in Kinde. The request sent to your API will include the access token, which gets validated when you receive it on your back end.
 
-Validation checks the token has not expired and that the token has originated from Kinde, as well as various other checks. While it is possible to write code to check this yourself, it can be easy to miss something and accidentally introduce serious security vulnerabilities. Here’s our recommendations:
+Validation checks the token has not expired and that the token has originated from Kinde, as well as various other checks. While it is possible to write code to check this yourself, it can be easy to miss something and accidentally introduce serious security vulnerabilities. Here's our recommendations:
 
 - Use the Kinde JWT verifier for your chosen technology (if available). Our Node package is available [here](https://www.npmjs.com/package/@kinde/jwt-validator).
 
@@ -62,7 +62,7 @@ OR
 
 OR
 
-- Choose a third-party library, for example the OpenID Foundation has [a list of libraries for working with JWT tokens](https://openid.net/developers/jwt/).
+- Choose a third-party library, for example the OpenID Foundation has [a list of libraries for working with JWT tokens](https://openid.net/developers/jwt/).
 
 #### Audience
 

src/content/docs/developer-tools/your-apis/protect-your-api.mdx

@@ -27,12 +27,12 @@ This ensures the access token you receive when the user signs in, will contain t
 When you make the call to your API you will want to ensure the access token is sent in the headers. An example in React for a bookstore app might be:
 
 ```jsx
-const {getToken} = useKindeAuth();
+const { getAccessToken } = useKindeAuth();
 const [books, setBooks] = useState([]);
 
 const fetchBooks = async () => {
   try {
-    const accessToken = await getToken();
+    const accessToken = await getAccessToken();
     const res = await fetch(`https://api.myapp.com/books`, {
       headers: {
         Authorization: `Bearer ${accessToken}`

src/content/docs/properties/work-with-properties/marketing-tags-properties.mdx

@@ -112,4 +112,4 @@ Likely you will want to see which tags are converting into sign ups and are perf
 /api/v1/search/users?query=properties[kp_usr_utm_source]=Hello&properties[kp_usr_campaign]=World
 ```
 
-The search organizations API is coming soon.
+The search organizations API is coming soon.