Add Nostr bunker login

src/features/nostr/nostr-bunker-login.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+
+import { authLoggedIn, verifyCredentials } from 'soapbox/actions/auth';
+import { obtainOAuthToken } from 'soapbox/actions/oauth';
+import { Button, Form, Input, Spinner } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+export const NostrBunkerLogin: React.FC = () => {
+  const history = useHistory();
+  const dispatch = useAppDispatch();
+
+  const [uri, setUri] = React.useState<string>('');
+  const [loading, setLoading] = React.useState<boolean>(false);
+
+  const onSubmit = async () => {
+    const url = new URL(uri);
+    const params = new URLSearchParams(url.search);
+
+    const pubkey = url.pathname.slice(2);
+    const secret = params.get('secret');
+    const relays = params.getAll('relay');
+
+    setLoading(true);
+
+    const token = await dispatch(obtainOAuthToken({
+      grant_type: 'nostr_bunker',
+      pubkey,
+      relays,
+      secret,
+    }));
+
+    const { access_token } = dispatch(authLoggedIn(token));
+    await dispatch(verifyCredentials(access_token as string));
+
+    history.push('/');
+
+    setLoading(false);
+  };
+
+  if (loading) {
+    return <Spinner />;
+  }
+
+  return (
+    <Form onSubmit={onSubmit}>
+      <Input value={uri} onChange={(e) => setUri(e.target.value)} placeholder='bunker://' />
+      <Button type='submit' theme='primary'>
+        <FormattedMessage id='login.log_in' defaultMessage='Log in' />
+      </Button>
+    </Form>
+  );
+};
+
+export default NostrBunkerLogin;

src/features/ui/index.tsx

@@ -142,6 +142,7 @@ import {
   ManageZapSplit,
   Rules,
   AdminNostrRelays,
+  NostrBunkerLogin,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -359,6 +360,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
         <WrappedRoute path='/signup' page={EmptyPage} component={RegistrationPage} publicRoute exact />
       )}
 
+      <WrappedRoute path='/login/nostr' page={DefaultPage} component={NostrBunkerLogin} publicRoute exact />
       <WrappedRoute path='/login/external' page={DefaultPage} component={ExternalLogin} publicRoute exact />
       <WrappedRoute path='/login/add' page={DefaultPage} component={LoginPage} publicRoute exact />
       <WrappedRoute path='/login' page={DefaultPage} component={LoginPage} publicRoute exact />

src/features/ui/util/async-components.ts

@@ -180,3 +180,4 @@ export const ZapInvoiceModal = lazy(() => import('soapbox/features/ui/components
 export const ZapsModal = lazy(() => import('soapbox/features/ui/components/modals/zaps-modal'));
 export const ZapSplitModal = lazy(() => import('soapbox/features/ui/components/modals/zap-split/zap-split-modal'));
 export const CaptchaModal = lazy(() => import('soapbox/features/ui/components/modals/captcha-modal/captcha-modal'));
+export const NostrBunkerLogin = lazy(() => import('soapbox/features/nostr/nostr-bunker-login'));