Login Views Tutorial

In this guide we will set up a simple example of programmatically changing views based on where the user is coming from.

We’re going to be referring a lot to the views type, found here.

Determine where the user is coming from

In our example, we will show a different signup/login experience to users coming from a specific URL. We will use the useLocation hook from react-router-dom to get the current URL.

import { useLocation } from "react-router-dom";

const location = useLocation();

If the user is coming from /landing-page/facebook, we will show only a Facebook button which gives you an embedded wallet. If you are coming from /landing-page/web3, we will show the default signup/login experience.

In the below code we are using the useState hook to create a state variable called source and a setter function called setSource. We are then using the useEffect hook to set the source to the current location.

const [source, setSource] = useState("");

const location = useLocation();

const isFacebookCampaign = location.pathname === "/landing-page/facebook";
const isWeb3Campaign = location.pathname === "/landing-page/web3";

const views = isFacebook ? "facebook" : isWeb3Campaign ? "web3" : "";

useEffect(() => {
  setSource(views);
}, [views]);

Declare the views

Views are passed in via the overrides key on the settings prop of DynamicContextProvider

The view object itself is of a specific type and you can review the type on the reference.

In our case, we want two different views, one for Facebook and one for Web3. We will use the facebook and web3 views.

const FACEBOOK_VIEW = {
  type: SdkViewType.Login,
  sections: [
    {
      type: SdkViewSectionType.Social,
      defaultItem: "facebook",
    },
  ],
};

const WEB3_VIEW = {
  type: SdkViewType.Login,
  sections: [
    { type: SdkViewSectionType.Wallet },
    {
      type: SdkViewSectionType.Separator,
      label: "Or",
    },
    {
      type: SdkViewSectionType.Email,
    },
    {
      type: SdkViewSectionType.Separator,
      label: "Or",
    },
    {
      type: SdkViewSectionType.Social,
      defaultItem: "twitter",
    },
  ],
};

Setting types to state

We want somewhere to store our view overrides. We will use the useState hook to create a state variable called viewOverrides and a setter function called setViewOverrides.

const [viewOverrides, setViewOverrides] = useState([]);

Setting the view overrides

We will use the useEffect hook to set the view overrides to the correct view based on the source.

useEffect(() => {
  if (source === "facebook") {
    setViewOverrides([FACEBOOK_VIEW]);
  } else if (source === "web3") {
    setViewOverrides([WEB3_VIEW]);
  } else {
    setViewOverrides([]);
  }
}, [source]);

Adding to the DynamicContextProvider

We can now pass the viewOverrides to the DynamicContextProvider.

Putting it all together

import React, { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import {
  DynamicContextProvider,
  DynamicWidget,
} from "@dynamic-labs/sdk-react-core";

import { SdkViewSectionType, SdkViewType } from "@dynamic-labs/sdk-api";

const FACEBOOK_VIEW = {
  type: SdkViewType.Login,
  sections: [
    {
      type: SdkViewSectionType.Social,
      defaultItem: "facebook",
    },
  ],
};

const WEB3_VIEW = {
  type: SdkViewType.Login,
  sections: [
    { type: SdkViewSectionType.Wallet },
    {
      type: SdkViewSectionType.Separator,
      label: "Or",
    },
    {
      type: SdkViewSectionType.Email,
    },
    {
      type: SdkViewSectionType.Separator,
      label: "Or",
    },
    {
      type: SdkViewSectionType.Social,
      defaultItem: "twitter",
    },
  ],
};

const App = () => {
  const [source, setSource] = useState("");
  const [viewOverrides, setViewOverrides] = useState([]);

  const location = useLocation();

  const isFacebookCampaign = location.pathname === "/landing-page/facebook";
  const isWeb3Campaign = location.pathname === "/landing-page/web3";

  useEffect(() => {
    setSource(isFacebookCampaign ? "facebook" : isWeb3Campaign ? "web3" : "");
  }, [isFacebookCampaign, isWeb3Campaign]);

  useEffect(() => {
    if (source === "facebook") {
      setViewOverrides([FACEBOOK_VIEW]);
    } else if (source === "web3") {
      setViewOverrides([WEB3_VIEW]);
    } else {
      setViewOverrides([]);
    }
  }, [source]);

  return (
    <DynamicContextProvider
      settings={{
        environmentId: "fba5127c-21c0-430e-bb03-7dc8f6b11397",
        overrides: { views: viewOverrides },
      }}
    >
      <DynamicWidget />
    </DynamicContextProvider>
  );
};

export default App;

Adding embedded wallets

That’s it! To make sure our facebook group also get an embedded wallet,follow this guide