[Question] How to create the login button for next js typescript

codebydant commented 1 year ago

Hi @alexandrtovmach,

thanks for this wonderful tool.

I am learning about frontend development and I have started with a project where I need a simple login button with a pop-up window. I was wondering if I create a component as you mentioned in the example code it will give me the login button? or that is something apart that I will need to develop?

I want to achieved this button in my frontend login page

Screenshot from 2023-01-27 08-05-18

alexandrtovmach commented 1 year ago

It's a button that delivered by this package by default

codebydant commented 1 year ago

Hi @alexandrtovmach,

I have created a file in components folder called: SSOMicrosoft.tsx

The content of the file is the following:

// SSOMicrosoft.tsx
import React from "react";
import MicrosoftLogin from "react-microsoft-login";

const SSOMicrosoft = () => {
  const authHandler = (err, data) => {
    console.log(err, data);
  };

  return (
    <MicrosoftLogin buttonTheme={"dark"} clientId={"MyCLIENTID"} authCallback={authHandler} />
  );
};

export default SSOMicrosoft;

Then, I imported the component into the index.tsx with:

import SSOMicrosoft from '@/components/SSOMicrosoft'

And in the body I have added <SSOMicrosoft/>

export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <div className={styles.description}>
          <p>
            Get started by editing&nbsp;            
            <code className={styles.code}>pages/index.tsx</code>
          </p>
          <SSOMicrosoft /> 
        </div>
      </main>
    </>
  )
}

But in the hello world I can't see the button, do you know what I am doing wrong?

Screenshot from 2023-01-27 11-20-00

codebydant commented 1 year ago

I found out how to make this work. If you set a wrong client id you won't be able to see the button. A complete example of this is in the example folder from the repo. But, for future reference for someone like me that is starting, I will share the code.

The code example is located at react-microsoft-login/examples/src/

Note

The client id is set in the config.js file

Screenshot from 2023-01-30 08-27-13

// ExamplePage.js
import React, { useState } from "react";
import {
  Container,
  Segment,
  Button,
} from "semantic-ui-react";

import config from "./config";
import MicrosoftLogin from "react-microsoft-login";

const ExamplePage = () => {
  const [msalInstance, onMsalInstanceChange] = useState();
  const [clientId] = useState(config.client_id);

  const [buttonTheme] = useState(
    config.themeOptions[0].value
  );
  const [graphScopes] = useState([
    config.graphScopesOptions[0].value,
  ]);
  const [withUserData] = useState(true);
  const [customClassName] = useState("my-button");
  const [customButton ] = useState(false);
  const [forceRedirectStrategy] = useState(
    false
  );
  const [debug] = useState(true);

  const loginHandler = (err, data, msal) => {
    console.log(err, data);
    if (!err && data) {
      onMsalInstanceChange(msal);
    }
  };

  const logoutHandler = () => {
    msalInstance.logout();
  };

  return (
    <div className="viewport">
      <Segment basic>
        <Container text>
          <Segment>
            {msalInstance ? (
              <Button onClick={logoutHandler}>Logout</Button>
            ) : (
              <MicrosoftLogin
                withUserData={withUserData}
                debug={debug}
                clientId={clientId}
                forceRedirectStrategy={forceRedirectStrategy}
                authCallback={loginHandler}
                buttonTheme={buttonTheme}
                className={customClassName}
                graphScopes={graphScopes}
                children={customButton && <Button>Custom button</Button>}
                useLocalStorageCache={true}
              />
            )}
          </Segment>
        </Container>
      </Segment>
    </div>
  );
};

export default ExamplePage;

// style.scss
.container {
    text-align: center;
  }

Output with good client id

Screenshot from 2023-01-30 08-25-18

Output with bad client id (client_id="mytest")

Screenshot from 2023-01-30 08-27-33

suggestion

@alexandrtovmach it would be nice to have some error message if the client id provided is incorrect or something similar, because the button is not displayed when this happens.

alexandrtovmach / react-microsoft-login