I try to create a personal portfolio site with GatsbyJS and want to protect certain areas of my site with a login, to be precise all pages with path /account should be proteced. Auth0 provides the protection. However, instead of showing the landing page (where I provide some basic information), the users get redirected directly to Auth0's login page.
I followed the tutorial of jlengstorf (https://www.youtube.com/watch?v=j-vuF2PYHmU&index=2&list=PLz8Iz-Fnk_eTpvd49Sa77NiF8Uqq5Iykx and https://github.com/jlengstorf/gatsby-auth0-app) and I'm quite sure, that I implemented it similar to his solution.
import React from "react"
import { Link } from "gatsby"
import ContainerUnauthenticated from "../components/containerUnauthenticated"
const IndexPage = () => {
return (
<div>
<ContainerUnauthenticated>
<p>
Here is some introducing text, just divs and ps, nothing special
</p>
<div style={{ textAlign: 'center' }}>
<Link to="/account/cv" className="waves-effect waves-default" style={{ color: '#039be5' }} >
<i class="fas fa-sign-in-alt" />
Please login here
</Link>
</div>
</ContainerUnauthenticated>
</div >
)
}
export default IndexPage
I also tried /account in Link's to attribute, but this did not work too.
I'd like to show the IndexPage first, hence the user can read the basic information of the landing page and can click on the "Login" button.
this is a problem likely in your react routes or somewhere else as to redirect to the Auth0 Login page you have to purposely redirect to the authorization endpoint. Also this could be the result of your index being protected by triggering a unauthenticated event. I hope this helps you in your quest.
https://auth0.com/docs/quickstart/spa/react
Related
I am new to React native and I am trying to open my webpages(page1,page2) inside webview using react native, and my component's webview in the below example.
Here page1 contains button on clicking that button, page2 is opening in child window in external browser.
Can somebody please tell me how to open page2 inside the webview, so that the user can get a good experience?
Example: Component 1
{
<WebView
scalesPageToFit
startInLoadingState={true}
renderLoading={() => { return <Loading/> }}
**source={{uri:"url to page1"}}**
onShouldStartLoadWithRequest={request => {
return request.url.startsWith(domain);
}}
style={styles.web}
javaScriptEnabledAndroid={true}
javaScriptEnabled={true}
originWhitelist={[domain+"*"]}
/>
}
I found the below solution but was not able to implement it in my scenario.
https://github.com/facebook/react-native/pull/6886
I found the answer, this happened because of the latest react-native-webview version.
setSupportMultipleWindows={true} becomes true and in my case, it should be false.
I'm trying to get access token and id token from auth0 login
The useUser hook only returning the user info, while I want to get access token and social media id of user
which I want to send to my own custom php api
to get user data and validate on my own database,
Kindly help me on this problem and suggest some good approaches according to you
here's my login page code:
import React from "react";
import { useUser} from "#auth0/nextjs-auth0";
const login = () => {
const { user, isLoading, error } = useUser();
//all user data here, with tokens
console.log(user);
return (
<div>
<div className="contentContainer">
<div className="contentRight">
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
height: "100vh",
width: "100vw",
}}
>
{user ? (
<div style={{ display: "flex", flexDirection: "column" }}>
Sign Out{" "}
<img src={user.picture} alt="" />
<h1>{user.name}</h1>
</div>
) : (
Sign in
)}
</div>
</div>
</div>
</div>
);
};
export default login;
Hope you are doing well.
Please refer to this article:- https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/#Next-js-Static-Site-Approach
Check the section of useSWR hook.
Hope that solves the problem.
Other than that - the code you have written in stack overflow - please add of react-router-dom, instead of tag, because tag refreshes the whole page every time.
You can refer:-
https://v5.reactrouter.com/web/guides/quick-start
Feel free to contact me if you have any doubts regarding this.
Uploading to Cloudflare Images with FilePond fails returning a 400. I'm testing it side by side with a simple form. I get the Direct Creator Upload URL from our api, pass it in to both components. The form always succeeds, while FilePond always fails. Can anyone suggest a fix please?
https://developers.cloudflare.com/images/cloudflare-images/upload-images/direct-creator-upload/
It's returning a 400 Bad Request. Can someone from CloudFlare or from FilePond figure out why CF Images is responding that the request from FilePond is malformed?
import { useState } from "react";
import { FilePond, registerPlugin } from "react-filepond";
import FilePondPluginImagePreview from "filepond-plugin-image-preview";
import FilePondPluginFileValidateType from "filepond-plugin-file-validate-type";
import DefaultButton from "./BaseComponents/defaultButton";
// Register the plugins
registerPlugin(
FilePondPluginImagePreview,
FilePondPluginFileValidateType,
);
interface Props {
uploadURL: string;
}
export default function UploadAvatar(props: Props) {
const { uploadURL } = props;
const [files, setFiles] = useState<any>([]);
return (
<>
{/* This simple form uploads successfully */}
<form action={uploadURL} method="post" encType="multipart/form-data">
<input type="file" id="myFile" name="file" />
<DefaultButton type="submit">Upload Image</DefaultButton>
</form>
{/* FilePond upload fails with a 400 */}
<div className="h-44 w-44 rounded-full ring-4 ring-light-control-accent-rest dark:ring-dark-control-accent-rest">
<FilePond
files={files}
onupdatefiles={setFiles}
allowMultiple={false}
maxFiles={1}
server={uploadURL}
name="file"
labelIdle='Drag & Drop your files or <span class="filepond--label-action">Browse</span>'
acceptedFileTypes={["image/*"]}
onerror={(error) => console.log(error)}
/>
</div>
</>
);
}
Okay so the solution to this is to take control of the file processing to ensure we are only sending the file.
Use the method outlined here: https://pqina.nl/filepond/docs/api/server/#process-1 replacing url-to-api with the Direct Creator Upload url we get from Cloudflare's API. If you are using TS note that as of today there is a type mismatch which causes an error. Just remove transfer options from the function params to fix.
More details here: https://github.com/pqina/filepond/issues/818
I am using Linking from React-Native. Linking.OpenUrl seems to work with most urls but it does not seem to work with urls which have non-english characters. See the example below in Expo where I have reproduced the case. Note that if you click on the url link directly it will open properly. However, when the same link is being opened via the Linking.OpenUrl it does something to the url and lands in a 404 page.
Here is a repro in Expo:
https://snack.expo.dev/#rezahok/linking-not-working
I am using Expo 42. Any help with this would be really appreciated.
Try with below code
export default class App extends Component {
render() {
const uri = `https://www.prothomalo.com/bangladesh/district/%E0%A6%A6%E0%A6%BF%E0%A6%A8%E0%A6%BE%E0%A6%9C%E0%A6%AA%E0%A7%81%E0%A6%B0%E0%A7%87-%E0%A6%B0%E0%A7%87%E0%A6%B2%E0%A6%95%E0%A7%8D%E0%A6%B0%E0%A6%B8%E0%A6%BF%E0%A6%82%E0%A7%9F%E0%A7%87-%E0%A6%AC%E0%A7%8D%E0%A6%AF%E0%A6%95%E0%A7%8D%E0%A6%A4%E0%A6%BF%E0%A6%97%E0%A6%A4-%E0%A6%97%E0%A6%BE%E0%A7%9C%E0%A6%BF%E0%A6%95%E0%A7%87-%E0%A6%9F%E0%A7%8D%E0%A6%B0%E0%A7%87%E0%A6%A8%E0%A7%87%E0%A6%B0-%E0%A6%A7%E0%A6%BE%E0%A6%95%E0%A7%8D%E0%A6%95%E0%A6%BE-%E0%A6%A8%E0%A6%BF%E0%A6%B9%E0%A6%A4-%E0%A7%A9`
const decodedUri = decodeURIComponent(uri);
return (
<View style={styles.container}>
<Button title="Click me" onPress={ ()=>{ Linking.openURL(decodedUri)}} />
</View>
);
}
}
I am using nuxt-links in my website navigation, most of them point to hashed elements/anchors in the home page like:
<nuxt-link
v-else
class="text-link"
:to="localePath('index') + `#${item.hash}`"
>
and it does its job if currently on the home page but when I navigate to a different site, eg. /about and I click on a navbar nuxt-link (so I want to navigate from /about to /#hash or /any-other-site#hash) I got a nuxt error displayed to check the console where it reads "Cannot read property 'offsetTop' of null"
My router configuration in nuxt.config (without it I wouldn't be even able to scroll to an anchored element being in the same site as the element!):
router: {
scrollBehavior(to) {
if (to.hash) {
return window.scrollTo({ top: document.querySelector(to.hash).offsetTop + window.innerHeight, behavior: 'smooth' });
}
return window.scrollTo({ top: 0, behavior: 'smooth' });
}
},
You have not defined the hash in your nuxt-link. Use:
<nuxt-link
v-else
class="text-link"
:to="{ path: localePath('index'), hash:`#${item.hash}` }"
>