Clash Royale CLAN TAG#URR8PPP

React-Bootstrap I can't get Alert to appear when checking if user email is verified

I am trying to make it so that when I check whether a user has verified their email, an alert will appear asking to verify your email. I am not a fan of the regular pop up alert, so I was using the React-bootstrap alert to make something like this appear:

You have yet to verify your email!

My console correctly logs whether a user is logged in and if the account is verified, but I can't get the alert to appear. Should I not make a notVerifiedAlert const? I've tried returning it directly, but it didn't make a difference. I'm not sure what is wrong because I am new to this and do not fully understand all concepts yet, so any help would be amazing.

notVerifiedAlert

import React, Component from 'react';
import firebase from 'firebase';
import Alert from 'react-bootstrap';

class CheckVerification extends React.Component
render()
const notVerifiedAlert = (
<Alert bsStyle="danger">
<h4>Almost there...</h4>
You have yet to verify your email!' '
<strong>
' '
To access the survey it is required that you verify your email.
</strong>' '
Upon sign up an email was sent you. However, if you need a new
verification sent to you click here. Once you verify your email, this
alert will go away.
</Alert>
);

return (
firebase.auth().onAuthStateChanged(function(user)
if (user)
console.log('This user is logged in.');
if (!firebase.auth().currentUser.emailVerified)
notVerifiedAlert;
console.log('This user is not verified');
else
console.log('This user is verified');

else
console.log('This user is not logged in');

)

);



export default CheckVerification;


update: I figured out a solution

1 Answer
1

I rethought my idea and rewrote it so if your email is not verified a specific page wont display. It's not perfect, but it works! :)

function sendLink()
firebase.auth().currentUser.sendEmailVerification()
alert("A verification email has been sent. Please go to your inbox now to verify you email. Refresh the page when complete.");


var fullID = '';

class SurveyPage extends Component
constructor()
super();
this.state =
name: 'React'
;


//if email not verified, dont show iframe
render()
if(!firebase.auth().currentUser.emailVerified)
return(
<div className="alert alert-danger">
<h5><strong>You must verify your email before viewing the survey.</strong></h5>
<a onClick=sendLink> <u> Click here to send another verification email. </u> </a>
<br/>
<small> This alert will go away once your email is verified.</small>
</div>
)

else

fullID = "https://airtable.com/embed/" + surveyID + "?backgroundColor=tealLight";

console.log("Full survey URL: " + fullID);

return (
<div id = "content" >
<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js" />
<IframeComponent
class="airtable-embed airtable-dynamic-height"
src= fullID
/>
</div>
);





By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.