Auth

Package Version Downloads
@carto/react-auth version downloads

OAuth utilities

Components

OAuthCallback

React component to attend OAuth callbacks on /oauthCallback. Ensure you include that specific route in your application.

  • Example:

    1
    2
    3
    4
    5
    6
    7
    
    import { OAuthCallback } from "@carto/react-auth";
    
    // inside the proper routing config...
    const routes = [
      /* ...some other routes and */
      { path: "/oauthCallback", element: <OAuthCallback /> },
    ];
    

Functions

useOAuthLogin

Hook to perform login against CARTO, with OAuth implicit flow and using a popup.

  • Input:

    Param Type Description
    oauthApp Object OAuth parameters
    oauthApp.clientId string Application client ID
    oauthApp.scopes Array.<string> Scopes to request
    oauthApp.authorizeEndPoint string Authorization endpoint
    onParamsRefreshed function Function to call when params are refreshed
  • Returns: function - A function to trigger oauth with a popup

  • Example:

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    
    import { useOAuthLogin } from "@carto/react-auth";
    
    const oauthApp = {
      clientId: "YOUR_OAUTH_CLIENT_ID",
      scopes: ["user:profile"],
      authorizeEndPoint: "https://carto.com/oauth2/authorize",
    };
    
    const onParamsRefreshed = (oauthParams) => {
      if (oauthParams.error) {
        console.error(`OAuth error: ${oauthParams.error}`);
      } else {
        console.log(oauthParams);
      }
    };
    
    const [handleLogin] = useOAuthLogin(oauthApp, onParamsRefreshed);
    // handleLogin function should be later handled from UI to trigger the flow
    

    Tip: Check CARTO for React templates for examples using this hook, where oauthApp data is managed within Redux store. For example, this is the Login page.