react-native-slack-login v1.0.1

React Native Slack login

Note: I haven't used it in a while, don't hesitate to create a pull request

Install

npm install react-native-slack-login react-native-webview --save

Then link the native iOS package:

npx pod-install

Setup (React Native < 0.60.0):

Automatic (recommended)

react-native link

with manual, see more

How to get Client ID and Client Secret of slack?

You'll need credentials to use Sign in with Slack. To retrieve your Client ID and secret, you'll need to create a Slack App if you haven't already.

in OAuth & Permissions section, add Redirect URLs

after that, you must complete steps in Basic Information

-Add features and functionality
-Install your app to your workspace
-Manage distribution

Usage:

For Functional component:

import React, { useState, useRef } from "react";
import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
import SlackLogin from "react-native-slack-login";
import CookieManager from "@react-native-community/cookies";

export default function App() {
  const slackRef = useRef();
  const [token, setToken] = useState(null);

  const onClear = () => {
    CookieManager.clearAll(true).then((res) => {
      setToken(null);
    });
  };

  return (
    <View>
      <TouchableOpacity onPress={() => slackRef.current.show()}>
        <Text style={{ color: "white" }}>Login</Text>
      </TouchableOpacity>
      <SlackLogin
        ref={slackRef}
        clientId="your client id"
        clientSecret="your client secret"
        redirectUrl="your redirect url"
        scopes={["chat:write:user", "channels:read"]}
        onLoginSuccess={(token) => setToken(token)}
        onLoginFailure={(data) => console.log(data)}
      />
    </View>
  );
}

For Class component:

import SlackLogin from "react-native-slack-login";
<View>
  <TouchableOpacity onPress={() => this.slackLogin.show()}>
    <Text style={{ color: "white" }}>Login</Text>
  </TouchableOpacity>
  <SlackLogin
    ref={(ref) => (this.slackLogin = ref)}
    clientId="your client id"
    clientSecret="your client secret"
    redirectUrl="your redirect url"
    scopes={["chat:write:user", "channels:read"]}
    onLoginSuccess={(token) => this.setState({ token })}
    onLoginFailure={(data) => this.setState({ failure: data })}
  />
</View>;

Props

Logout

To logout use clear cookies by using https://github.com/react-native-community/cookies

import CookieManager from '@react-native-community/cookies';

  logout() {
    CookieManager.clearAll(true)
      .then((res) => {
        console.log('CookieManager.clearAll =>', res);
        this.setState({ token: '' })
      });
  }

Pull request

Pull requests are welcome!